Question

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

来自this：

在以下场景中的任何元素下，在文档中的任何位置形成堆叠上下文：... 2.具有位置值＆＃34;绝对＆＃34;的元素。或者＆＃34;亲戚＆＃34; 和z-index值除了＆＃34; auto＆＃34;。

现在请看一下这段代码：

＆＃13;

.c1 {
  position: relative;
  top: 50px;
}


.c2 {
   background: green;
   width: 200px;
   height: 200px;
 }

＆＃13;

<div class="c1">
  Why I'm visible?
</div> 

<div class="c2">&nbsp;</div>

＆＃13;

如前两个引号所示，div.c1不应创建新的堆叠上下文，因为它没有z-index。因此，div.c1和div.c2位于<html>堆叠上下文中，应按顺序呈现。但为什么div.c2在 div.c1

下呈现

Answer 1

相对定位引入了在该元素上使用z-index的能力，这对于静态定位的元素不起作用。因此，即使您不设置z-index值，此元素现在也会在 上显示 任何其他静态定位元素。

此外，如果您在元素上设置 position：relative; 但没有其他定位属性（顶部，左侧，底部或右侧），它将对它没有任何影响完全定位，就像你把它留在 position：static ;但是如果你做给它一些其他的定位属性，比如说你的例子，top：50px;，它会将它的位置从通常的位置向下移50个像素

这就是你的.c1“叠加”在.c2

之上的原因

Answer 2

这里c1有堆叠上下文，因为它有位置：相对于它，所以如果你给位置绝对的c2，那么两个div将处于同一级别。然后它将在源订单上分层。

.c1 {
  position:relative;
  background:blue;
  top: 50px;
}


.c2 {
  position:absolute;
   background: green;
   width: 100px;
   height: 100px;
 }

<div class="c1">
  I'm visible?
</div> 

<div class="c2">&nbsp;</div>

Answer 3

position：relative意味着元素按正常流程呈现，然后相对于自己的位置计算偏移量。没有偏移量（你提供的），顺序应该是：render c1 first然后在它下面渲染c2（而不是它上面），因为它们都是块元素。在上面的代码中，你提供了10px到c1的偏移量，所以它向下移动10px并与c2重叠。

为什么定位：没有z-index的相对会创建一个新的堆叠上下文？

3 个答案: