没有使用z-index的相对定位会导致重叠。

Question

我创建了两个兄弟div，并在最后一个上应用了负边距，但当我给第一个添加了position: relative时，它重叠了它的下一个兄弟：

.box {
  width: 100px;
  height: 100px;
}

.box-1 {
  position: relative;
  background: orange;
}

.box-2 {
  margin-top: -50px;
  background: yellowgreen;
}

<div class="box box-1">box-1</div>
<div class="box box-2">box-2</div>

然而，MDN认为：

z-index值为非“auto”的定位元素（绝对或相对定位）将创建一个新的堆叠上下文。

所以我猜不是堆叠上下文造成了重叠，你知道这是怎么发生的吗？

- Dolphin_Wood

Answer 1

没有任何定位属性的标准块总是在定位元素之前呈现，并出现在它们下面，即使它们在HTML层次结构中后出现。

Example being

.absolute {
    position: absolute;
    background:purple;
    left: 80px;
}

.relative {
    position: relative;
    left:50px;
    background:yellow;
    top:-50px;
}

div {
    width:100px;
    height:100px;
    border: 1px dashed #999966;
    background:blue;
}

<div class="absolute">absolute</div>
<div>normal</div>
<div class="relative">relative</div>
<div>normal</div>

相对定位的一个很酷的特点是，即使使用left, right, top, bottom将其移动，它仍被认为处于原始位置。如果使用外边距来定位元素，则容器的边界也会随之移动。可以使用上面相同的示例，但更改相对位置以使用外边距来查看这一点。有关相对定位的参考文献

- Bankzilla

Answer 2

非定位元素总是在显式定位元素之前呈现。这意味着通过将position: relative应用于'box-1'，它会在'box-2'之后呈现，因此出现在其上方。

- Alvin Pascoe

---

为什么渲染顺序会影响堆叠顺序？有没有相关的文章讨论这个问题？ - Dolphin_Wood

因为没有指定z-index（影响叠放顺序），唯一决定它们位置的是渲染顺序。根据Sean提供的链接，引用了这样一段话 - “普通块（DIV＃5）在正常流中，没有任何定位属性，总是在定位元素之前呈现，并出现在它们下面，即使它们在HTML层次结构中后出现也是如此。” - Alvin Pascoe

引用来自以下页面中的黄色“注释”框：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index - Alvin Pascoe

Answer 3

重叠是由于你的CSS中的margin-top: -50px;引起的

- Barney

---

我不认为负边距会导致重叠，请查看此链接：http://jsbin.com/himodi/2/edit?html,css,output - Dolphin_Wood

@Dolphin_Wood 指的是 div2 在 Dom 中排名第二，但仍然在 div1 下方。 - Sean Stopnik

Answer 4

这里有一个不错的解释：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index

标准块在正常流中，没有任何定位属性的情况下，总是先于定位元素呈现，并且出现在它们的下方，即使它们在HTML层次结构中稍晚。

- Sean Stopnik

---

尽管这能够解释为什么会发生这种情况，但请至少在此提供一些背景信息，而不是链接到其他页面。 - Bankzilla