为什么css中设置z-index为999依然被其他元素遮挡_排查同级元素的堆叠顺序

z-index 999被盖住的根本原因是元素未定位或受父级层叠上下文限制：z-index仅对position为relative/absolute/fixed/sticky的元素生效，且只在同一个层叠上下文中有效；父元素若含opacity<1、transform、filter等属性会创建新层叠上下文，使子元素z-index失效于外部比较。 z-index 999 为什么还是被盖住？先看它有没有生效 z-index 只对 值为 、 、 或 的元素起作用。如果目标元素仍是 （默认值），哪怕写 ，浏览器也直接忽略。 检查方式：在 DevTools 中选中该元素，看 面板里 是否显示为 ；若显示 ，说明 没设对，或被其他 CSS 覆盖重置了。 常见漏点： 被父级 或 暗中触发新层叠上下文，导致子元素的 失效范围缩小 别只改子元素——先确认父容器有没有意外创建层叠上下文（比如加了 ） 用 DevTools 的“Layers”面板（Chrome）或“3D View”（Firefox）直观观察层叠结构 同级元素堆叠顺序不按 z-index？查它们是否在同一个层叠上下文里 两个元素即使 DOM 位置相邻、 差 1000，只要分属不同层叠上下文，就无法直接比较。比如 在 内，而遮挡它的 是 直接子元素——它们的共同祖先可能是 ，但各自父级已分别创建了独立层叠上下文。 哪些属性会强制创建新层叠上下文？ 立即学习 “ 前端免费学习笔记（深入） ”； + 值不为 小于 1（哪怕 ） 不为 （包括 、 ） 、 、 等 关键判断：打开 DevTools → Elements → 右键目标元素 → “Show stacking context”。如果某父级被标为 “stacking context”，那它内部的所有 都只能在这个小世界里排序。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 被遮挡的元素明明 position 正确，z-index 也生效，但还是压不住？看父级 z-index 是否拖后腿 子元素的 再高，也无法突破其所在层叠上下文容器的层级。例如： 这里 的 完全无效——它被死死锁在 （ ）这个容器里，而 的 更高，所以整个 （含下拉菜单）都被压在下面。 解决方向不是给子元素加更大 ，而是提升其**最近的层叠上下文容器**的 如果容器本身不能动（如第三方组件封装的 ），可尝试在它外层包一层 并设 警惕 父级——它虽不创建层叠上下文，但会裁剪子元素超出部分，造成“被遮挡”假象 ECharts / Ant Design / Vue 组件弹层被盖？优先检查框架默认样式是否悄悄建了层叠上下文 很多 UI 库或图表库会在根容器上加 或 用于动画或过渡效果，这会无意中让整个组件树陷入一个低层级的层叠上下文。比如 ECharts 的 默认是 ，但如果它挂载在某个带 的 下，再高的 也出不去。 临时验证法：给组件外层加 ，看是否恢复 Ant Design 的 默认挂载到 ，但如果项目用了 错误地挂到局部节点，就会掉进局部层叠上下文 Vite/Vue 项目中，某些 CSS Scoped 编译可能意外插入 ，建议检查生成后的 CSS 文件中是否有未预期的属性 真正难调的从来不是数字大小，而是搞清你写的 到底在跟谁比、在哪片空间里生效。