Question

我知道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%;
}

Answer 1

因为搜索框是绝对定位的，所以它将脱离正常流程。

由于它不是正常流动，因此它对容器的高度没有影响。

由于其容器没有其他内容，容器最终的高度为零。

因此，容器后面的元素不会被容器的高度向下推。

Answer 2

您的绝对位置会使文本找到最佳位置。绝对意味着它将“悬停”在页面顶部。

您可以将位置设置为相对位置，并添加一些和高度以将框放在顶部。

只需替换相对的绝对值

Answer 3

对于相对定位的div，它没有任何高度，所以这两个div都是＆＃39;你好＆＃39;文字正在那里展示。

给相对定位的div一些最小高度。

＆lt; div style =＆＃39; position：relative; min-height：32％＆＃39;＆gt;

....
....

＆LT; / DIV＆GT;

哪种方式适合您。

Div不是一个一个地在HTML中显示？

3 个答案: