请查看此非常简单的代码段，以在下面说明我的问题：

#container {

  position: relative;

  padding: 20px;

  border: 2px solid gray;

}



#back {

  position: absolute;

  top: 0;

  bottom: 50%;

  left: 0;

  right: 0;

  background-color: #bbb;

}


<div class="col-sm-12" id="container">

  <div id="back"></div>

  <h1>Some Text</h1>

</div>

该h1标签 之后 的back元素，在HTML代码。

由于我不更改其position属性，因此必须为static。而且，据我所知，static元素是根据页面的流向定位的。

那么……为什么绝对位置div 显示在 其同级 上方h1？

我希望它会在h1第一时间出现。

请注意，我知道如何 纠正 此行为，我只是在问为什么！

修正片段：

#container {

  position: relative;

  padding: 20px;

  border: 2px solid gray;

}



#back {

  position: absolute;

  top: 0;

  bottom: 50%;

  left: 0;

  right: 0;

  background-color: #bbb;

}



/* Adding the below corrects this behaviour */



h1 {

  position: relative;

}


<div class="col-sm-12" id="container">

  <div id="back"></div>

  <h1>Some Text</h1>

</div>

......为什么使用position: relative上h1更正此行为？