HTML布局中的层叠水平混乱全场景排查与治理-html教程-PHP中文网

z-index 不生效的根本原因是未进入层叠上下文：元素必须设置非 static 的 position 才能启用 z-index；若父子不在同一堆叠上下文，z-index 数值对比失效；全局浮层应挂载到 body 下以避免被中间容器隔离。

html布局中的层叠水平混乱全场景排查与治理

z-index 写了没反应，不是值不够大，而是你根本没进入可比较的层叠上下文——99% 的层级混乱问题出在 position 缺失或父级意外创建了隔离“盒子”。

元素加了 `z-index` 却完全不生效

这是最常被忽略的前提错误：z-index 对 position: static（默认值）完全无效，浏览器直接忽略该声明。

检查目标元素的 Computed 面板，确认 position 实际值是不是 static；如果是，z-index 灰显或标为 (not applicable)
不要依赖父级的 position: relative——子元素必须自己显式声明 position: relative（最安全）或 absolute/fixed
position: sticky 在滚动超出边界后会退化为 relative，此时 z-index 行为可能突变，慎用于关键浮层
Flex/Grid 子项即使视觉上“浮动”，也仍需单独加 position 才能启用 z-index

两个元素 `z-index` 一大一小，还是被盖住

数值对比失效，说明它们不在同一个堆叠上下文（stacking context）里——就像两栋楼各自有 10 层，但一栋建在山脚、一栋建在山顶，楼层数再高也比不过地基落差。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

触发新堆叠上下文的常见祖先属性：opacity: 0.99、transform: translateZ(0)、filter: blur(1px)、will-change: transform、isolation: isolate
在 DevTools 的 Computed 面板搜 Stacking Context，看是否有祖先节点标注 This element establishes a stacking context
临时注释掉可疑父级的 transform 或 opacity，观察子元素是否立刻“浮上来”
若必须保留这些属性（如硬件加速），把它们上移到更高层级容器（比如挂到下的 wrapper），而非套在目标元素正上方

全局浮层（如弹窗、预览框）被局部容器压住

问题不在浮层本身，而在它嵌套路径中某个父容器悄悄成了“层级天花板”——它的 z-index 值再低，也会锁死整个子树的上限。

检查浮层 DOM 路径上所有祖先：只要有一个设置了 position: relative + z-index（非 auto），就创建了新上下文
典型陷阱：轮播图卡片加了 transform，里面弹出的按钮无论如何调 z-index 都出不来；编辑器里带 opacity 的面板，其内部预览浮层永远盖不过外部工具栏
修复思路：把需要全局竞争的浮层（如 modal、tooltip、preview-overlay）直接挂到下，绕过中间所有可能触发上下文的父容器
避免用 z-index: 9999 硬扛——这只会掩盖设计缺陷，让后续插入新层级（比如 toast 提示）时无处安放