Css 为什么位置：不带z索引的相对创建新的堆叠上下文？

由此：

具有相同堆栈级别的两个元素根据其源顺序进行分层。连续的元素叠加在它们的前辈之上

和来自：

堆叠上下文由以下场景中的任何元素在文档中的任何位置形成：。。。2.位置值为“绝对”或“相对”且z索引值不是“自动”的元素。

现在请看这段代码：

.c1{
位置：相对位置；
顶部：50px；
}
.c2{
背景：绿色；
宽度：200px；
高度：200px；
}

为什么我是可见的？

相对定位引入了在该元素上使用z-index的功能，这实际上不适用于静态定位的元素。因此，即使没有设置z索引值，该元素现在也会显示在任何其他静态定位元素的顶部

如果设置了位置：相对在一个元素上，但没有其他定位属性（顶部、左侧、底部或右侧），它将对它的定位没有任何影响，它将与您将其保留为位置：静态时完全相同；但是如果您确实给它一些其他的定位属性，比如根据您的示例，top:50px；，它将从正常位置向下移动50个像素

---

这就是为什么.c1在.c2上“堆叠”的原因，这里c1有堆叠上下文，因为它有position:relative，所以如果将position absolute赋予c2，那么两个div将处于相同的级别。然后它将按源顺序分层

.c1{
位置：相对位置；
背景：蓝色；
顶部：50px；
}
.c2{
位置：绝对位置；
背景：绿色；
宽度：100px；
高度：100px；
}

我看得见吗？

位置：相对意味着元素在正常流程中按其应该的方式渲染，然后偏移量是相对于其自身位置计算的。因此，如果没有偏移量（您已经提供），顺序应该是：首先渲染c1，然后渲染其下方（而不是上方）的c2，因为它们都是块元素。在上面的代码中，你提供了一个10px到c1的偏移量，所以它向下移动了10px，与c2重叠

position:relative

是否将其移出文档的正常流程？@morne from:relative：元素根据文档的正常流程进行定位，然后根据top、right、bottom和left的值相对于自身进行偏移。position:relative不会更改元素的流程顺序，但是更改了元素相对于正常流动位置的位置。它不获取堆叠上下文，因为它没有

z-index

@mqklin位置也会影响堆叠以及浮动和z-index。@monssef若要形成上下文，元素的位置值应为“绝对”或“相对”，z-index值应为“自动”（根据MDN文章）有和，没有或。这是否意味着MDN文章不准确？他们对此只字不提似乎这是正确的答案：在这种情况下，位置：相对不会创建新的堆叠上下文。c1只是在渲染c2后获得偏移量。因此过程是：1）渲染c1 2）渲染c2 3）使用偏移量重新渲染c1