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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

回答：

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

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

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

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

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

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

    1. 所有

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

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

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

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

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

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

。

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

绘画行为

以上是 为什么使用绝对位置会导致div在顶部？ 的全部内容， 来源链接： utcz.com/qa/399924.html

回到顶部