大家好，我每年！
首先宣布答案：z索引不一定生效，不一定值得，主要取决于层的重叠；为父元素设置一个大的z索引无法实现封面元素，但是它将子元素的z索引设置为负数，但可以满足要求。
这两个问题的测试站点是层堆叠上下文的一层，本文将澄清为什么。第一篇文章发表在我的公共帐户：私立教育年度。Subscribe以尽快获取我的最新文章！
考虑名称并不难。层堆叠的上下文是从三维角度的角度来判断不同级别的最终堆叠关系。它由z索引属性确定为“级别”。
z索引用于指定Z轴处元件的高度。值越大，离用户越接近，则越大的“顶部”。
它可能会感觉到此属性在使用时可能不会服从：将z索引设置为元素似乎没有生效，它不会像预期的那样运行到其他元素。由于它在单独使用时不会生效，它必须与定位属性合作，也就是说，它仅对指定位置属性的元素生效 - 只要它不是默认值静态，其他绝对，相对和固定可以使Z index发生生效。
如图1所示，在粉红色父元件下有两个绝对定位子元素1和2。两个子元素均未在z索引处设置。顶部/左属性的位置控制它们并允许它们重叠。根据HTML出现的顺序，堆叠结果。
（图1）
公共帐户背景回复103获取在线代码地址
如果我们希望1高于图2，如图2所示，您可以将z索引：1添加到元素1中，而无需指定z索引2的z索引，仍然可以视为0.元素1在元素上。2。
（图2）
公共帐户背景回复104获取在线代码地址
到目前为止，没有困难，但是大小是比较。但是很多次，您会发现不能以简单的值来解释分层结果：
（图3）
公共帐户背景回复105获取在线代码地址
（图4）
公共帐户背景回复106获取在线代码地址
如果您想了解这些问题，则需要了解堆叠上下文。
图层堆叠的上下文听起来更抽象，您可以想象它是一个三维空间，在该空间中有许多平面。
最大的分层上下文是由文档-html：IT本身及其子元素的根元素形成的，构成了堆叠上下文的最大层，也就是说，我们编写的所有代码都在根层中重叠。
层堆叠上下文包含多个平面。具体来说：每个z索引的值形成一个平面。普通的未准备好的块级元素也是一个平面，浮动元件也是平面。正是这些平面形成一层重叠。
另外，每个具有Z-Index值的元素还将生成及其子元素的堆叠上下文层。这个堆叠上下文的小层与带有多个平面的父级相同。
在处理这些上下文时，我们可以按小到大的顺序恢复：首先，在最小的堆叠上下文中，最小元素的堆叠顺序被整个堆叠上下文 - 整个，然后与其他父母级别堆栈中的元素。
我不知道您是否在小吃街上看过Oracle Wenxianbei：将面糊放在一个大型破碎机锅中，在面糊上放一个小虾，最后关闭盖上夹紧夹子。上面的虾的外观。
（从互联网屏幕截图）
用于按下切片的锅是上下层的一层，面糊和虾是不同级别的HTML元素。它们在变平之前以清晰的顺序放置，但最终会形成一块薄薄的小饼干。这个小饼干可以放入较大的锅中，其他成分作为原材料继续制作大饼干，但是在大锅的眼中，当面糊出生或虾时，这个小饼干是诞生的。一点一点重要，因为现在已经是整个，只是在第二盆中讨论这个小饼干，这在放置其他成分的顺序上有意义。
面对某些无法判断层次关系的人，我们可以整理出“堆叠树”的层，这与DOM树的结构有点相似。从小到大，在上下文中堆叠不同平面的元素上下文一层。
以下几个示例将加深以下示例，所有这些示例都伴随着在线链接。
公共帐户背景回复107获取在线代码地址
DOM的分层关系如下
尽管Container1和Container2绝对位置，但是没有Z索引，它不会形成一层重叠的上下文。因此，只有一个根元素。
当然，第2、2和3号的元素也形成了堆叠的上下文一层，但是没有子元素，因此没有讨论，同一示例是相同的
上层和下级参赛者形成如下：
从底部到顶部，最终的分层关系并不难判断 -
公共帐户背景回复108获取在线代码地址
根据demo1稍作修改它，将z索引添加到container1，container2，现在dom的层次关系变为：
Container1和Container2都设置了Z Index，以及由根元素形成的层层，总共三个。
上层和下级参赛者形成如下：
首先查看由Container1形成的图层堆栈上下文。目前，无论其z索引是多少，形成图层重叠的元素在当前上下文的底部，然后是第一元素，2。
然后是由容器2形成的一层堆叠上下文。只有一个3号元素。没什么可说的。
最后，根层上下堆叠。在眼睛中，Container1和Container2是整体。container2在下面，容器1向上。
因此，从底部到顶部的最终顺序是： -
公共帐户背景回复109获取在线代码地址
先前的容器无法视觉上看到它，现在给它颜色。容器2的z索引设置为0，现在DOM的层次关系变为：
现在可以看出，从底部到顶是 -
这个示例更难理解。通过用层堆叠树分析它，有两个堆叠上下文，一个是由根元素形成的，另一个是container2
在容器2形成的堆叠上下文中只有一个元素2。即使他的z索引为负，它也会放在容器上。
在底层中，有三个元素：container1，container2和编号1. container1不设置z索引，可以将其视为0，与container2级别相同。当水平相同时，它是根据出现在HTML.-Container2-1中的序列确定的。
最后，集装箱中的其他元素进行扩展以获得最终的分层关系 -
通过这三个示例，您应该能够清楚地感觉到什么层堆叠比赛，并总结他的规则：
仅明确指定了z索引（非自动）的定位元素，它是否会产生一层堆叠上下文。在此层重叠中，即使是负面的，内部元素级别也在其上方。
如果它是未指定z索引（即自动）的定位元素，尽管它不能形成堆叠的上下文层，但它与比较时z索引的级别相同。
如果还放置了浮动元素，我们可以获得完整的分层级别：
这张照片看起来很复杂。实际上，您不需要携带它，您可以一一看它：
在其中，当多个具有相同层层重叠的元素重叠时，堆叠关系是根据HTML的顺序确定的，后者出现在其上。
除定位z索引元素外，CSS3还提供了另一种生成堆叠上下文层的方法。
特别部分的门没有列出，含义不是很好，并且可以在开发中使用什么：
这些可以生成图层堆栈。Flex子元素也可以使用Z Index。层次结构设定在不久的将来。其余三个设置无效，但在比较级别的关系下，它被视为z索引：0。
图层堆栈和z索引的两个概念是不可分割的。堆叠上下文层由许多Z index属性元素形成的平面组成。具有z索引属性的元素将形成子层堆栈上下文。当然，必须有效地设置z索引。过去，它是指定位元素，位置是绝对/相关的。现在它也可以是Flex的子元素。
在复杂元素的层中，主要是整理一层堆叠的上下文树。元素的分层级别仅在当前层重叠中有意义。
回到一开始的两个问题，答案并不难理解。
如果您认为这篇文章对您有帮助，请给我赞美并观看?这对我很重要
您的支持是我创作的最大动力??
原始：https：//juejin.cn/post/7099712000917258254