元素被遮挡主因是堆叠上下文与z-index规则不清：需先设position（relative等）使z-index生效；父级若创建新堆叠上下文（如opacity<1），子元素z-index仅在内部比较；建议按功能分层设定z-index范围，并用DevTools检查computed值及堆叠上下文。
元素被遮挡，通常是因为堆叠上下文（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 < 1、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;，直观确认谁真正在上层
