为什么使用绝对位置会导致 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>

... 为什么在 h1 上使用 position: relative 可以纠正这种行为？

Answer 1

试试看。 h1 添加样式如下

#container {
  position: relative;
  padding: 20px;
  border: 2px solid gray;
}

#back {
  position: absolute;
  top: 0;
  bottom: 50%;
  left: 0;
  right: 0;
  background-color: #bbb;
}
#container h1 {
  position : relative;
  z-index: 1;
}

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

static elements 没有一个 z-index，但是，其他 default to 0 这就是为什么它停留在 html 的最底层和非静态的原因元素覆盖它。如果你想在上面显示它们，将静态元素的 position 设置为 relative 并给出任何 positive z-index value.

Answer 2

top、right、bottom、left 和 z-index 属性对默认的 position: static 没有影响元素的值，在您的情况下是 h1 标签。当 position 设置为 relative 时，当 z-index 的值不是 auto 时，它会创建一个新的堆叠上下文。

有关堆栈上下文的更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Answer 3

绘画顺序是这样的。如所述 here 您有以下顺序：

For all its in-flow, non-positioned, block-level descendants in tree order: If the element is a block, list-item, or other block equivalent:

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

Otherwise: first for the element, then for all its in-flow, non-positioned, block-level descendants in tree order:

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

All positioned, opacity or transform descendants, in tree order that fall into the following categories:

All positioned descendants with 'z-index: auto'

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

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

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

Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order (most negative first) then tree order.

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

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

您可能还会注意到，背景和内容都是在 2 个不同的步骤中打印的，这也可能导致 some non intuitive painting behavior。

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

Why using absolute position causes the div to be on top?

html

css

css-position