z-index失效的bug

z-index失效的原因是子表按钮的z-index值超过了其父层叠上下文的z-index范围，导致按钮被父表遮挡。 具体分析如下：

层叠上下文限制子表按钮的z-index为200，但其父容器（弹窗）的z-index仅为101。根据层叠规则，子元素的z-index仅在其所属的层叠上下文中有效，无法突破父容器的限制。因此，即使按钮的z-index值更高，它仍会被父表（可能属于更高层级的上下文）遮挡。

父表与子表的层叠上下文竞争父表可能通过以下方式创建了独立的层叠上下文：
父表容器设置了position: relative/absolute/fixed + z-index（如100）。
父表使用了opacity、transform、filter等属性（这些属性也会隐式创建层叠上下文）。子表弹窗的z-index（101）虽高于父表容器（100），但子表按钮的z-index（200）仅在子表弹窗的上下文中生效，无法覆盖父表的其他元素（如父表按钮）。
关键验证点
将子表按钮的z-index从200改为2后，按钮显示正常。这是因为2小于父弹窗的z-index（101），符合层叠规则。
其他系统未出现此问题，因其弹窗的z-index值极高（如10002），子按钮的z-index（200）远低于父容器，自然不会被遮挡。
Flex与Fixed的影响
子表按钮的父容器使用了flex布局：若该容器未创建层叠上下文（如未设置position或z-index），子按钮的z-index可能受更外层上下文限制。
若按钮本身设置了position: fixed：fixed元素会基于视口创建层叠上下文，但若其父容器已创建上下文，则按钮的z-index仍受父容器限制。

解决方案

提高子表弹窗的z-index值将子表弹窗的z-index设置为远高于父表的值（如1002），确保其层叠上下文优先级更高。
.child-modal { position: fixed; z-index: 1002; /* 高于父表的z-index（如100） */}
调整子按钮的z-index范围确保子按钮的z-index值小于子表弹窗的z-index，但高于弹窗内其他元素：
.child-modal-button { position: relative; z-index: 10; /* 10 < 1002 */}
检查父表的层叠上下文属性若父表容器无意中创建了层叠上下文（如设置了opacity: 0.99），需移除或调整其属性，避免干扰子表层级。
统一系统层级管理策略为所有弹窗定义明确的z-index范围（如1000-9999），避免层级冲突。例如：
基础弹窗：1000-1999
重要弹窗：2000-2999
系统级弹窗：3000+

总结z-index失效的本质是层叠上下文的嵌套限制，而非单纯数值大小。修复时需确保：

通过调整层级关系后，子表按钮可正常显示（如上图控制台验证结果）。

热门标签