定位、层叠上下文、z-index 怎么排查
先理解原理和示例,再练习完整口述与追问。
回答要点
先确认定位参照和滚动容器,再看层叠上下文。z-index 大不保证跨上下文覆盖;transform 等属性可能影响定位或层叠。弹窗被遮挡还要检查祖先裁切。
原理拆解
z-index 的比较发生在层叠上下文内,子元素无法仅靠大数字逃离父上下文。定位元素的 z-index、transform、opacity 小于 1、isolation 等都可能建立新的上下文;固定定位元素也可能被有 transform 的祖先影响包含块。排查要沿祖先链找出真正参与外层排序的盒子,而不是只盯弹窗自己的值。
示例与推演
假设 A 的 z-index 为 1,里面的弹窗为 99999;兄弟 B 的 z-index 为 2。若 A、B 各自建立上下文,A 内弹窗仍可能被 B 遮住。修复可以调整参与外层排序的祖先,或把弹层挂到合适的顶层容器;Vue3 Teleport、React Portal 改变 DOM 挂载位置,但仍需管理焦点和语义。
易错点
overflow 裁切和层叠排序是两类问题,提高 z-index 无法修复所有被裁切场景。也不要无依据把全站层级都改成巨大的数字。
参考回答可直接练习口述
我先检查元素是 static、relative、absolute、fixed 还是 sticky,以及它相对哪个包含块定位。absolute 常相对最近建立相应包含块的祖先,fixed 也可能受 transform 等祖先影响。再看层叠上下文:子元素的 z-index 再大也不能随意跨越父上下文的层级。弹窗被遮挡还可能是祖先 overflow 裁切,此时单纯加 z-index 没用,要调整挂载容器或布局结构。