17370845950

元素被遮挡主因是堆叠上下文与z-index规则不清：需先设position（relative等）使z-index生效；父级若创建新堆叠上下文（如opacity

元素被遮挡，通常是因为堆叠上下文（stacking context）和 z-index 的作用规则没理清。单纯加 z-index 不一定生效，关键得让元素“有资格”参与层叠比较。

确保元素拥有定位属性

z-index 只对定位元素（position 值为 relative、absolute、fixed 或 sticky）生效。普通 static 元素即使设了 z-index 也无效。

• 检查目标元素是否设置了 position: relative;（最常用且不影响布局）
• 避免只写 z-index: 999; 而忘记加定位声明
• 例如：div { position: relative; z-index: 10; }

理解堆叠上下文的“隔离性”

父元素一旦形成新的堆叠上下文（如设置了 opacity 、transform、filter、或 z-index 且 position 为非 static），其内部子元素的 z-index 就只在该父容器内比较，无法越过父级去和外部兄弟元素争高低。

• 常见“失效”场景：弹窗父容器加了 opacity: 0.99，导致里面 z-index: 9999 的按钮仍被外部 z-index: 100 的导航栏遮住
• 解决思路：把需要前置的元素移出有堆叠上下文的父容器；或去掉父级触发新上下文的样式（如改用 rgba() 背景代替 opacity）

合理设置 z-index 数值与层级结构

数值本身没有绝对意义，只在同级堆叠上下文中起作用。建议按功能分层约定数值范围，避免随意用 999/9999：

• 基础层（如背景、内容区）： z-index: 0 ~ 10
• 浮层组件（如提示框、下拉菜单）： z-index: 100 ~ 199
• 模态框/弹窗： z-index: 1000 ~ 1099
• 全局提示（Toast、Loading 遮罩）： z-index: 2000+

调试技巧：快速定位问题

遇到遮挡，别急着调数字，先确认当前结构是否符合预期：

• 用浏览器开发者工具选中被遮挡元素，看右侧面板中 Computed 标签页里 z-index 是否生效（显示具体数值而非 auto）
• 观察其父级是否标有 “Stacking Context” 提示（Chrome DevTools 中会注明）
• 临时给疑似“遮挡者”加 outline: 2px solid red;，直观确认谁真正在上层