Question

我知道之前已经讨论了没有z-index的堆叠顺序，并且我知道在默认的堆叠顺序中已定位的和未定位的元素会有所不同。

但是，在我已阅读的所有文档中，无论何时说“ 外观的顺序”或“ 后代未定位/定位”，我仍然感到非常困惑区块”，甚至“ 树订单”等

我想知道document中规则的确切含义是什么，尤其是父子层次结构对堆叠顺序的影响。例如，如果已定位的父母有未定位的孩子，或者未定位的孩子有已定位的父母会发生什么？

我创建了两个小提琴作为演示，它们之间的css类是相同的：

.non-positioned {
  position: static;
  padding: 5px;
}

.positioned {
  position: absolute;
  padding: 5px;
}

.big {
  width: 200px;
  height: 100px;
}

.medium {
  width: 60px;
  height: 60px;
}

.margin-20 {
  margin: 20px;
}

.bg-red {
  background-color: rgba(255, 0, 0, 0.8);
}

.bg-blue {
  background-color: rgba(0, 0, 255, 0.8);
}

.bg-green {
  background-color: rgba(0, 255, 0, 0.8);
}

.bg-yellow {
  background-color: rgba(255, 255, 0, 0.8);
}

.bg-black {
  background-color: rgba(0, 0, 0, 0.8);
}

第一个

https://jsfiddle.net/da8qom1n/

<div class="positioned big margin-20 bg-red">
  <div class="positioned medium margin-20 bg-black"></div>
  <div class="non-positioned medium bg-green"></div>
</div>
<div class="non-positioned big bg-blue">
  <div class="non-positioned medium bg-yellow"></div>
</div>

我在这里的问题是：

为什么未定位的绿色块位于未定位的蓝色和未定位的黄色块的顶部？在蓝色和黄色之后，绿色块会以什么顺序定义出现？
为什么未定位的绿色块甚至在定位红色块的顶部？

第二个

https://jsfiddle.net/91jo5f3k/（唯一的区别是现在定位了黄色块）

<div class="positioned big margin-20 bg-red">
  <div class="positioned medium margin-20 bg-black"></div>
  <div class="non-positioned medium bg-green"></div>
</div>
<div class="non-positioned big bg-blue">
  <div class="positioned medium bg-yellow"></div>
</div>

我的问题是：为什么定位的黄色块位于定位的红色和黑色之上？孤立地看时似乎很简单，但是当与第一个小提琴一起看时，令我感到困惑的是，黄色块的未定位蓝色父级似乎对其堆叠顺序没有任何影响，而在第一个示例中，定位的绿色块父级似乎可以将绿色div的堆叠顺序提高到更高的值。

修改

浏览完其他人提供的所有帖子（以及链接，规范）后，我设法在elaboration here

的帮助下找到了答案。

我认为重要的是第8条规则：

所有已定位的后代，它们的树序为'z-index：auto'或'z-index：0'。对于具有'z-index：auto'的用户，对待该元素，就好像它创建了一个新的堆叠上下文，但实际上创建了一个定位后代和后代的任何新的堆栈上下文应被视为父堆栈上下文的一部分，而不是新的堆栈上下文。对于那些“ z-index：0”的对象，请处理自动生成的堆栈上下文。

这基本上意味着，即使没有z-index，定位的父对象也有效地创建了堆栈上下文，但仅针对其未定位的子元素。

为使其可视化，渲染树类似于：

堆叠的树是：

虚线矩形表示堆叠上下文（效果）。

定位的红色div为其未定位的子绿色创建堆栈上下文效果，但是其定位的子黑色仍参与由根节点html定义的父堆栈上下文。 Black div稍后出现是因为 preorder 深度优先遍历必须先访问红色节点。蓝色和黄色也一样。蓝色和黄色位于其他位置之前，因为它们未定位。

基本上，我只是在规范中寻找支持以下说法的证据：默认情况下（不涉及z-index或显式堆栈上下文的创建），子元素永远不会低于其父元素。之所以成立，是因为：

如果父级和子级都未定位，则树顺序（先于预排序深度）确保子级位于顶部。

如果同时定位父级和子级，则树顺序（先于预订深度）确保子级位于顶部。

如果父项未定位但子项已定位，则它们都参与某些父级堆栈上下文，并且无论所定位的元素具有更高的堆栈顺序。

如果父对象已定位，但子对象未定位，则被定位的父对象的行为就像为其未定位的子对象创建了堆叠上下文，因此子对象始终位于父对象的顶部。

父子关系如何影响没有z-index的堆叠顺序？

0 个答案: