为什么使用绝对位置会导致div在顶部? [英] Why using absolute position causes the div to be on top?

问题描述

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

Please see this very simple snippet to illustrate my question below:

#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标记位于HTML代码中back元素的之后.

The h1 tag is after the back element, in the HTML code.

由于我没有更改其position属性，因此它必须为static. 而且，据我所知，static元素是根据页面的流向定位的.

As I don't change its position property, it must be static. And, as far as I know, static elements are positioned according to the flow of the page.

所以...为什么绝对位置div 显示在上方其同级h1?

So… Why is the absolute-positioned div is shown above its sibling h1?

我希望它会出现在h1后面，因为它首先出现.

I am expecting to see it behind the h1 since it comes first.

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

Note that I know how to correct this behaviour, I'm just asking why!

具有更正的代码段:

#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可以纠正此行为?

… And why using position: relative on the h1 corrects this behaviour?

推荐答案

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

This is how the painting order works. As described here you have the following order:

1. 对于所有其流入，按树序排列的未定位块级子代:如果元素是块，列表项或其他块 等价物:

1. 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元素的背景和边框

In this step you will print the background and border of the h1 element

1. 否则:首先按元素顺序，然后按树顺序对所有其流入，非定位，块级后代:

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

在此 complex 步骤中，您将打印h1元素的内容

In this complex step you will print the content of the h1 element

1. 所有定位的，不透明或转换后代，按树顺序分为以下类别:

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

1. 所有定位为'z-index:auto'的后代

1. All positioned descendants with 'z-index: auto'

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

And in this step you will print the positioned element #back; thus it will be on the top of h1 even if in the DOM it's before.

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

In other words, we first consider the in-flow elements then the postioned ones. Of course, changing z-index and/or other properties will affect the order because more steps can be consider.

例如，在#back上添加负数z-index会触发以下规则:

For example adding a negative z-index to #back will trigger this rule:

1. 由具有负z索引(不包括0)的按z索引顺序排列的后代所形成的堆叠上下文(首先为负数)，然后 树顺序.

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

由于稍后在步骤(4)和(7)中打印h1，因此这将使#back落后.

This will make the #back to be behind since h1 is printed later in the step (4) and (7).

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

Adding position:relative (or absolute or fixed) to h1 will make it a positioned element so like #back it will trigger the (8) and in this case the tree order will decide.

您可能还会注意到，背景和内容均以两个不同的步骤打印，这也可能导致

You may also notice that both background and content are printed in 2 different steps and this may also lead to some non intuitive painting behavior.

这篇关于为什么使用绝对位置会导致div在顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！