z-index 无效通常因父容器创建了新层叠上下文，如 transform、opacity
z-index 无效？先确认父容器是否创建了新的层叠上下文
两个 position 非 static 的兄弟元素，z-index 看似不生效，大概率是它们的某个共同祖先（比如 body 或某个 div）设置了 transform、opacity、filter、will-change 或 isolation: isolate —— 这些都会创建新的层叠上下文，把子元素的 z-index 限制在该上下文内，彼此之间无法跨上下文比大小。
实操建议：
- 用浏览器开发者工具检查两元素的「Computed」面板，看
z-index是否被标记为「inherited」或「not applicable」 - 逐级向上检查父元素的
transform、opacity: 、<code>filter等属性，临时注释掉它们验证是否恢复预期层级 - 若必须保留这些样式，就让两个目标元素拥有同一个「最近的非隔离父容器」——比如把它们提到同一级
div下，且该div不触发层叠上下文
JS 动态切换 z-index：别直接设数字，用 class 控制更稳
用 element.style.zIndex = '10' 虽然能改，但容易和 CSS 里其他规则冲突（比如 !important 或更高优先级的选择器），也难维护状态。推荐用 class 切换，语义清晰、可复用、CSS 里还能加过渡（虽然 z-index 本身不可动画）。
实操建议：
- 定义两个 class：
.z-above { z-index: 100; }和.z-below { z-index: 10; } - JS 中用
el.classList.toggle('z-above')或el.classList.replace('z-below', 'z-above')替换，避免手动管理数字 - 如果要保证「总有一个在上」，建议绑定事件时统一处理逻辑，例如：
btn.addEventListener('click', () => { if (elA.classList.contains('z-above')) { elA.classList.remove('z-above'); elB.classList.add('z-above'); } else { elA.classList.add('z-above'); elB.classList.remove('z-above'); } });
鼠标事件穿透？z-index 正确但点击不到上层元素
常见现象：视觉上 A 在 B 上面，但点 A 没反应，反而触发了 B 的 click。这通常不是 z-index 问题，而是 A 的 pointer-events: none、透明区域过大、或 visibility: hidden / opacity: 0 导致事件无法捕获。
实操建议：
- 检查 A 元素的
pointer-events是否为none（常被误用于“禁用但保留占位”） - 用开发者工具的「Toggle element screenshot」功能确认 A 是否真覆盖了目标区域（比如宽高为 0、
transform: scale(0)） - 避免用
opacity: 0或visibility: hidden来“隐藏但保持层级”，它们仍会参与事件流；如需彻底移出交互，用display: none或移除 class
移动端 Safari 的 z-index 坑：fixed 元素 + transform 组合易失效
iOS Safari（尤其旧版本）对同时含 position: fixed 和 transform 的元素，z-index 行为不稳定，可能出现兄弟元素层级错乱，即使 DOM 顺序和数值都正确。
实操建议：
- 尽量避免给
fixed元素加transform（包括translateZ(0)这类“强制硬件加速”的 hack） - 若必须用
transform，尝试将z-index提升到父容器（比如整个body或一个全屏div），而非直接设在fixed子元素上 - 在 iOS 上测试时，打开「Safari 开发者菜单 → 开发 → [设备名] → 显示 Web 检查器」，实时观察层叠上下文层级（Layers 面板）
真正麻烦的从来不是怎么设 z-index，而是它被谁限制、被谁覆盖、被谁悄悄重置。每次调不好，先看父级有没有隐形的层叠上下文，再看自己是不是在跟 transform 和 opacity 打架。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
