Div не отображаются один за другим в HTML?

Я знаю, что 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%;
}