为什么使用绝对位置会导致div在顶部？

Question

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

#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更正此行为？

Answer 1

这就是绘画顺序的工作方式。如此处所述，您具有以下顺序：

1. 对于其所有 流入的 ，未定位的，块级的树状后代：如果元素是块，列表项或其他等效块：
   
   

在此步骤中，您将打印h1元素的背景和边框

1. 否则：首先按元素顺序，然后按树顺序为其所有 流入 ，未定位的块级后代：
   
   

在这个 复杂的 步骤中，您将打印h1元素的内容

1. 按树顺序的所有 position ，opacity或transform后代均属于以下类别：

   1. 所有 带有’z-index：auto’的后代
      
      

在这一步中，您将打印定位的元素#back；因此，h1即使在DOM中，它也位于DOM 的顶部。

换句话说，我们首先考虑流入要素，然后考虑位置要素。当然，更改z-index和/或其他属性会影响顺序，因为可以考虑更多步骤。

例如加入负z-index，以#back将触发此规则：

1. 堆叠由具有负z索引（不包括0）的后代按z索引顺序（最负数先）然后按树顺序形成的上下文。
   

#back由于h1稍后将在步骤（4）和（7）中进行打印，因此这将使其滞后。

添加position:relative（或absolute或fixed）h1将使其成为定位元素，就像#back它将触发（8）一样，在这种情况下，将确定
树的顺序 。

您可能还会注意到，背景和内容都以两个不同的步骤进行打印，这也可能导致[某些 不直观的
绘画行为