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

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

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

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）一样，在这种情况下，将确定
树的顺序 。

---

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