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

Question

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

.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表示

使用“auto”以外的 z-index 值定位（绝对或相对）将创建一个新的堆叠上下文。

所以我想这不是堆叠上下文导致重叠，你知道这是如何发生的吗？

Answer 1

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

例子是

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

不过，relative 的一个很酷的地方是，即使您使用left, right, top, bottom. 如果使用边距来定位元素，则容器的边界也会随之移动。这可以使用上面的相同示例看出，但更改相对位置以使用边距。参考相对定位