前端知库

为什么 z-index 设置很大,元素还是被遮挡?

理解层叠上下文,以及子元素无法跨越父级层叠顺序的原因。

参考答案

z-index 的比较受层叠上下文约束。子元素的巨大 z-index 不能越过父级所在上下文与外部兄弟上下文的排序关系。

定位元素配合非 auto 的 z-index、transform、opacity 小于 1、isolation 等都可能创建层叠上下文,具体条件应查阅规范。

排查时从被遮挡元素向上检查祖先上下文。弹层可以考虑移至合适的 DOM 层级,或使用 dialog、Popover 等支持 top layer 的原生机制;同时处理焦点、遮罩与关闭交互。