Я знаю, что div
элементы являются элементами уровня блока. Они приходят один за другим в разных рядах. Я обнаружил одно странное поведение. Он не отображается один за другим.
<div id ="contend">
<div style='position:relative'> <div class='serach-box'>
<div class="container">
<p>Live Search</p>
<!--Row with two equal columns-->
<div class="row" >
<div class="col-md-3" >
<div class="demo-content">Location</div>
</div>
<div class="col-md-3" >
<div class="demo-content bg-alt">.col-sm-6</div>
</div>
</div>
<!--Row with two equal columns-->
<div class="row">
<div class="col-md-3" >
<input type="text" class="form-control">
</div>
<div class="col-md-3" >
<input type="text" class="form-control">
</div>
</div>
</div>
</div></div>
<div>hello</div>
<div>hello</div>
</div>
Я добавил два div
элемента после завершения serach-box
div
. Я дал serach-box
position: absolute;
и его родителю div
position: relative;
.
Но почему текст div
появился выше? Почему не под serach-box
div
?
Код ниже:
http://plnkr.co/edit/ONrHDKuaP9bwmT7MsQhD?p=preview
.serach-box{
width: 90%;
height: 150px;
border: 1px solid;
position:absolute;
left:5%;
}
3 ответа
Поскольку окно поиска абсолютно позиционировано, оно выведено из нормального потока.
Поскольку он не находится в нормальном потоке, он не влияет на высоту своего контейнера.
Поскольку его контейнер не имеет другого содержимого, контейнер заканчивается с нулевой высотой.
Следовательно, элементы, следующие за контейнером, не сдвигаются вниз по высоте контейнера.
Ваша абсолютная позиция заставит текст найти путь к вершине. Абсолютный означает, что он будет зависать в верхней части страницы.
Вы можете установить положение относительно и добавить некоторые с и высоту, чтобы разместить поле сверху.
Просто замените абсолютное на относительное
Для div, который относительно позиционирован, он не принимает высоту, поэтому оба div с текстом «hello» отображаются там сами.
Дайте некоторую минимальную высоту относительно позиционированному div.
....
....
Который будет хорошо работать для вас.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.