z-index失效需先检查定位上下文，仅position为relative/absolute/fixed/sticky时生效；避免中间父级意外创建层叠上下文；优先用DOM顺序和留白策略替代z-index；覆盖层须配合pointer-events控制事件穿透。
z-index 失效时先检查定位上下文
很多情况下 z-index 看似没起作用，并不是写错了，而是父容器没触发定位上下文。元素只有在 position 为 relative、absolute、fixed 或 sticky 时，z-index 才会生效；static（默认值）下无论设多大都无效。
- 检查目标元素及其所有父级是否意外设置了
position: static或没设position - 常见陷阱：某个中间父容器用了
position: relative但没设z-index，它就自动成为新的层叠上下文，把子元素的z-index“截断”了 - 用浏览器开发者工具的“Layers”面板或勾选“Show layer borders”可直观看到层叠边界
用 margin/padding 替代绝对定位硬覆盖
当弹窗、提示条、悬浮按钮等需要“浮在内容上”，但又不想靠 position: absolute + z-index 硬盖，容易遮挡可点击区域或破坏流式布局——这时优先考虑留白策略。
- 给主体内容区域加
padding-bottom（如底部固定栏）或margin-bottom（如悬浮操作按钮），预留出不被覆盖的安全区 - 对响应式场景，用
@media配合min-height或clamp()动态调整留白，比固定top/bottom更可靠 - 避免在
body上直接设padding，容易干扰全局布局；推荐包裹一层<main></main>或<div class="content"> 再处理<h3>层级结构要扁平，少嵌套层叠上下文</h3> <p>每创建一个新层叠上下文（比如父元素设了 <code>z-index且position != static），子元素的z-index就只能在这个小世界里比较，跨上下文无法直接竞争。.card { position: relative; z-index: 10; /* 创建新层叠上下文 */ } <p>.card__overlay { position: absolute; z-index: 9999; /<em> 在 .card 内部最高，但可能仍低于隔壁 .header（z-index: 100） </em>/ }- 能不用
z-index就不用：靠 DOM 顺序（后写的元素默认在前写的上面）+ 自然流式定位解决多数覆盖问题 - 必须分层时，统一用几个语义化层级常量，比如
--z-nav: 100、--z-modal: 1000，写在 :root 里，避免魔数散落 - 慎用
transform、opacity 、<code>will-change等隐式创建层叠上下文的属性，它们和显式z-index效果等价但更难察觉
移动端触摸穿透与 pointer-events 的配合
覆盖层（如遮罩
.modal-overlay）如果只是视觉上挡住下面内容，但没阻止事件传递，用户点下去还是会触发底层按钮——这不算“覆盖”，是漏事件。立即学习“前端免费学习笔记（深入）”；
- 确保遮罩层有
pointer-events: auto（默认），而它下面的内容区域在遮罩激活时设pointer-events: none - 不要只依赖
z-index和透明度来“隐藏”交互，visibility: hidden仍占位且不拦截事件，display: none才彻底移除 - 对 iOS Safari，若覆盖层含
input或textarea，需额外测试软键盘唤起后是否导致定位偏移或事件丢失
真正难处理的不是怎么“盖上去”，而是盖完之后用户还能不能点、滚动是否卡顿、缩放时位置还对不对。这些细节往往藏在
position类型切换、transform使用、以及无意中创建的层叠上下文里。 - 能不用
