CSS如何实现元素堆叠层级控制_掌握z-index属性的优先级-css教程-PHP中文网

z-index 不生效的主因是元素未设置定位属性（position 为 relative/absolute/fixed/sticky），且受层叠上下文限制；需确保目标元素定位、避免祖先意外创建层叠上下文，并按功能分层管理数值。

css如何实现元素堆叠层级控制_掌握z-index属性的优先级

z-index 不生效？先确认父元素有没有定位

很多情况下 z-index 看似写了却完全不起作用，根本原因不是值设小了，而是它只对「定位元素」有效。也就是说，position 必须是 relative、absolute、fixed 或 sticky 之一，static（默认值）下写 z-index 直接被忽略。

常见错误现象：div 上写了 z-index: 999，但始终被后面出现的元素盖住；检查发现它的 position 没改，还是 static。

务必给要控制层级的元素显式设置 position: relative（最常用且安全）
如果父容器用了 position: absolute，子元素的 z-index 是相对于该父容器的层叠上下文，不是全局
不要依赖文档流顺序“碰运气”，z-index 和 DOM 顺序无关，只和层叠上下文有关

为什么两个同级元素设了不同 z-index 还是没分出前后？

问题往往出在「层叠上下文」被意外创建。一旦某个祖先元素形成了新的层叠上下文（比如设置了 opacity: 0.99、transform: translateZ(0)、will-change: transform 或 filter），它的所有子元素的 z-index 就只能在这个上下文内部比较，无法越过它去和外部兄弟元素比高低。

使用场景：做弹窗时，发现模态框被另一个带 filter: blur(1px) 的卡片遮住了，即使模态框 z-index 是 9999 —— 因为卡片自己建了个层叠上下文，把内部层级“锁死”了。

用浏览器开发者工具的「Layers」面板或勾选「Paint flashing」可快速识别隐式层叠上下文
避免在不需要的祖先上加 opacity（小于 1）、transform、filter 等触发属性
真需要模糊/动效又想保持层级自由？把效果移到子元素上，而不是父容器

z-index 数值该设多大才保险？

数值本身没有上限，但盲目堆高（比如 z-index: 2147483647）反而暴露设计缺陷。真正影响层级的是「相对顺序」，不是绝对大小。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

性能与兼容性影响：极高的数值不会拖慢渲染，但会让后续维护者困惑；IE6/7 对负值支持差，不过现在基本不用考虑。

按功能分层更可靠：比如 z-index: 10（基础内容）、50（浮动按钮）、100（Toast）、200（Dropdown）、300（Modal）
留出空档（如每档差 10），方便中间插入新层级
避免跨项目复用魔数，用 CSS 自定义属性统一管理：--z-modal: 300;