Я знаю, что 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%;
}
-1
user944513 17 Дек 2015 в 13:47

3 ответа

Лучший ответ

Поскольку окно поиска абсолютно позиционировано, оно выведено из нормального потока.

Поскольку он не находится в нормальном потоке, он не влияет на высоту своего контейнера.

Поскольку его контейнер не имеет другого содержимого, контейнер заканчивается с нулевой высотой.

Следовательно, элементы, следующие за контейнером, не сдвигаются вниз по высоте контейнера.

4
Quentin 17 Дек 2015 в 10:51

Ваша абсолютная позиция заставит текст найти путь к вершине. Абсолютный означает, что он будет зависать в верхней части страницы.

Вы можете установить положение относительно и добавить некоторые с и высоту, чтобы разместить поле сверху.

Просто замените абсолютное на относительное

-1
BonifatiusK 17 Дек 2015 в 10:59

Для div, который относительно позиционирован, он не принимает высоту, поэтому оба div с текстом «hello» отображаются там сами.

Дайте некоторую минимальную высоту относительно позиционированному div.

....
....

Который будет хорошо работать для вас.

-1
Sravan 17 Дек 2015 в 11:03