javascript - HTML 中的 div 不是一一显示的吗？

Question

我知道 div 元素是 block 级元素。他们一个接一个地排成不同的行。我发现了一种奇怪的行为。就不一一展示了。

<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>

我在完成 serach-box div 后添加了两个 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

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

因为它不在正常流动中，所以它对其容器的高度没有影响。

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

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