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值定位（绝对或相对）将创建新的堆叠上下文。

所以我猜这不是堆叠上下文导致重叠，任何关于如何发生的想法？

Answer 1

正常流程中没有任何定位属性的标准块始终在定位元素之前呈现，并显示在它们下面，即使它们稍后出现在HTML层次结构中。

示例是

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

关于亲戚的一些很酷的事情是，它仍然被认为是在它的原始位置，即使你已经被移动了left, right, top, bottom 。如果使用边距来定位元素，则容器的边界也随之移动。这可以是seen using the same example以上，但更改相对位置以使用保证金。 Reference to relative positioning

Answer 2

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

Answer 3

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

Answer 4

这是一个不错的解释：

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

正常流程中没有任何定位属性的标准块始终在定位元素之前呈现，并显示在它们下面，即使它们稍后出现在HTML层次结构中。

没有z-index的相对定位导致重叠

4 个答案: