这就是绘画顺序的工作方式。如此处所述，您具有以下顺序：
- 对于其所有 流入的 ，未定位的，块级的树状后代：如果元素是块，列表项或其他等效块：
在此步骤中，您将打印
h1元素的背景和边框
- 否则：首先按元素顺序，然后按树顺序为其所有 流入 ，未定位的块级后代：
在这个 复杂的 步骤中，您将打印
h1元素的内容
按树顺序的所有 position ，opacity或transform后代均属于以下类别：
- 所有 带有’z-index：auto’的后代
在这一步中，您将打印定位的元素
#back；因此，
h1即使在DOM中，它也位于DOM 的顶部。
换句话说，我们首先考虑流入要素，然后考虑位置要素。当然，更改
z-index和/或其他属性会影响顺序，因为可以考虑更多步骤。
例如加入负
z-index，以
#back将触发此规则：
- 堆叠由具有负z索引（不包括0）的后代按z索引顺序（最负数先）然后按树顺序形成的上下文。
#back由于
h1稍后将在步骤（4）和（7）中进行打印，因此这将使其滞后。
添加
position:relative（或
absolute或
fixed）
h1将使其成为定位元素，就像
#back它将触发（8）一样，在这种情况下，将确定
树的顺序 。
您可能还会注意到，背景和内容都以两个不同的步骤进行打印，这也可能导致[某些 不直观的
绘画行为
