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

Question

请看下面这个非常简单的片段来说明我的问题：

\n\n

\r\n

\r\n

#container {\r\n  position: relative;\r\n  padding: 20px;\r\n  border: 2px solid gray;\r\n}\r\n\r\n#back {\r\n  position: absolute;\r\n  top: 0;\r\n  bottom: 50%;\r\n  left: 0;\r\n  right: 0;\r\n  background-color: #bbb;\r\n}

\r\n

<div class="col-sm-12" id="container">\r\n  <div id="back"></div>\r\n  <h1>Some Text</h1>\r\n</div>

\r\n

\r\n

\r\n

\n\n

在 HTML 代码中，标记h1位于元素之后。back

\n\n

由于我没有改变它的position属性，所以它一定是static。\n而且，据我所知，static元素是根据页面的流程定位的。

\n\n

那么\xe2\x80\xa6 为什么绝对定位div 显示在其同级之上h1？

\n\n

我期待在后面看到它，h1因为它是第一位的。

\n\n

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

\n\n

带有更正的片段：

\n\n

\r\n

\r\n

#container {\r\n  position: relative;\r\n  padding: 20px;\r\n  border: 2px solid gray;\r\n}\r\n\r\n#back {\r\n  position: absolute;\r\n  top: 0;\r\n  bottom: 50%;\r\n  left: 0;\r\n  right: 0;\r\n  background-color: #bbb;\r\n}\r\n\r\n/* Adding the below corrects this behaviour */\r\n\r\nh1 {\r\n  position: relative;\r\n}

\r\n

<div class="col-sm-12" id="container">\r\n  <div id="back"></div>\r\n  <h1>Some Text</h1>\r\n</div>

\r\n

\r\n

\r\n

\n\n

\xe2\x80\xa6 为什么使用position: relativeon可以h1纠正这种行为？

\n

Answer 1

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

4. 对于按树顺序排列的所有流入、非定位、块级后代：如果元素是块、列表项或其他等效块：

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

7. 否则：首先针对该元素，然后针对其所有按树顺序排列的流入、非定位、块级后代：

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

8. 所有Positioned、Opacity 或 Transform 后代，按树顺序分为以下类别：

   1. 所有使用“z-index: auto”定位的后代

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

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

例如添加负数z-index将#back触发此规则：

3. 由具有负 z 索引（不包括 0）的定位后代形成的堆叠上下文，按 z 索引顺序（最负的第一个）然后是树顺序。

这将使#back位于后面，因为h1稍后会在步骤 (4) 和 (7) 中打印。

添加position:relative(或absolute或fixed) 将h1使其成为定位元素，因此#back它将触发 (8)，在这种情况下，树顺序将决定。

您可能还注意到背景和内容都是在两个不同的步骤中打印的，这也可能导致一些不直观的绘画行为。