介绍最近在使用第三方组件时，发现无法在弹窗中再次正常覆盖已有的弹窗。首先我以为是和stackinglayer属性z-index有关，所以重新回顾总结了一下。来源我的githubz-index名称z-index可以取值auto//inherit默认值auto适用于定位元素继承非定位元素是指position值不是静态的元素。对于定位元素，z-index属性指定：当前堆叠上下文中框的堆叠级别。框是否创建堆叠上下文。该值的含义如下：：生成框在当前堆叠上下文中的堆叠层级。此框还创建了一个新的堆叠上下文。auto：生成的框在当前堆叠上下文中的堆叠级别为0。该框不会创建新的堆叠上下文，除非它是根元素。在CSS2.1中，每个框在三个纬度上都有一个位置。除了它们的垂直和水平位置外，框还沿“Z轴”排列，并在另一层之上设置格式。当框在视觉上重叠时，与Z轴的位置密切相关。接下来我们讨论如何将盒子放置在Z轴上。渲染树绘制到画布上的顺序由堆叠上下文描述。一个堆栈上下文可以包含更多的堆栈上下文。从父堆栈上下文的角度来看，堆栈上下文具有原子统一性。每个框都属于一个堆叠上下文。在给定的堆叠上下文A中，每个定位的框都有一个整数堆叠级别，其在Z轴上的位置是相对于堆叠上下文A中的其他堆叠级别。具有较高堆叠级别的框总是在具有较低堆叠级别的框之上格式化.盒子也可能有负堆栈级别。在同一个堆叠上下文中，相同的堆叠层级按照文档树的顺序从后往前堆叠。根元素形成根堆叠上下文。其他堆叠上下文，由具有z-index属性值的任何非静态定位元素生成，该属性值是auto以外的有效值。堆栈上下文不一定与包含块相关。在未来的CSS层次结构中，其他属性可能会引入堆叠上下文，例如opacity。在每个堆叠上下文中，下面的层按从后到前的顺序绘制：形成堆叠上下文元素的背景和边框。具有负堆叠级别的后代堆叠上下文。在文档流中，非内联、非定位后代。非定位浮动。在文档流中，内联、非定位后代，包括内联表和内联块。堆栈级别0的后代堆栈上下文和堆栈级别0的定位后代。具有正数堆栈级别的后代堆栈上下文。在每个堆叠上下文中，堆叠级别为0的定位元素、非定位浮点数、内联块和内联表被绘制，就好像它们自己生成一个新的堆叠上下文一样，但它们的定位子元素和任何可能的子堆叠上下文都参与其中当前的堆栈上下文。这个绘制顺序递归地应用到每个层叠上下文中，定义见附录E。根据上面的标准描述，结合常见情况，进一步理解。同级堆叠示例这是一个示例页面，移动端访问如下：前面介绍过，z-index指定了当前堆叠上下文中的堆叠级别，所以先判断三个元素所在的堆叠上下文是谁创建的在示例中位于.示例中只有三个元素和它们的父元素是定位元素，父元素没有指定z-index，所以它所在的堆叠上下文是由根元素建立的。z-index的值越大，显示越接近用户，如标准中所述。不同层级的堆叠不同层级还可以分为：父元素均无层叠、父元素有层叠、父元素均有层叠。这是一个样例页面，移动端访问如下：针对以上现象，按标准分析：父元素无层叠：先找出层叠元素所在的层叠上下文，找到示例中的堆叠上下文是由根元素形成的，z-index值越大显示越靠近用户，因此容器1的后代显示在容器2的后代之上。其中一个父元素具有堆叠级别：在示例中，有3个元素具有堆叠级别。容器2后代和容器1的堆叠上下文由根元素形成。容器2后代的z-index值较大，显示距离用户更近，所以容器2的后代显示在容器1之上。按照标准，一个stackingcontext可以包含更多的stackingcontext，descendant的绘制堆叠上下文在父级堆叠上下文中，因此容器2的后代显示在容器1的后代之上。父元素有层叠：例子中有4个元素有层叠，容器1和容器2的层叠上下文由根元素构成，容器1的z-index值较大，所以容器1为显示在容器2的顶部。各自的后代是根据父堆叠层次结构绘制的，因此容器1出现在容器2后代的顶部，后者看起来最接近用户。参考文献z-indexMDNz-indexRecommendationsz-indexdraft
