z-index 仅对已定位元素有效，且只在相同堆叠上下文中按数值比较；跨上下文时无效，常见失效原因是未设 position 或父级创建了独立堆叠上下文。

z-index 不是“写上就上”，它只在特定条件下参与层级计算——元素必须已定位，且必须处于可比较的堆叠上下文（stacking context）中。数值大小只是同一上下文内的排序依据，跨上下文时完全无效。

为什么写了 z-index 却没效果？

最常见原因：目标元素没设 position，或设成了 position: static（默认值）。

• z-index 对 position: relative、absolute、fixed、sticky 有效；对 static 或未声明 position 的元素完全忽略
• Flex / Grid 子项即使视觉上“浮动”，也仍需显式加 position 才能启用 z-index
• 框架组件（如 Vue 的 v-if 或 React 的内联样式）可能覆盖你写的 position，导致 z-index 失效
• 检查开发者工具「Computed」面板：搜 position 和 z-index，确认最终生效值是否符合预期

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

问题不在数字本身，而在它们是否属于同一个堆叠上下文。父级一旦创建了独立堆叠上下文，子元素的 z-index 就只在内部起作用。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 触发新堆叠上下文的常见操作：position: relative + z-index（非 auto）、opacity: 0.99、transform: translateZ(0)、will-change: transform
• iOS Safari 对 transform 和 will-change 极其敏感，哪怕只为硬件加速，也可能意外创建上下文
• 排查方法：在 DevTools 中搜索 “Stacking Context”；临时注释掉父级的 opacity 或 transform，看层级是否恢复
• 不要盲目堆高数值（如 z-index: 999999），先理清 DOM 嵌套与上下文归属

父子元素的 z-index 谁说了算？

子元素永远在父元素之上，但它的“高度”受限于父容器的堆叠上下文边界——父级层级低，子再高也出不去。

• 子元素的 z-index 只影响它和兄弟元素的顺序，不改变整个父容器在外部的层级位置
• 若两个子元素分属不同父容器（比如一个在 .modal 下，一个在 .header 下），谁在上取决于这两个父容器自身的 z-index 比较结果
• iframe 是完全独立的文档环境，它的 z-index 与父页面无任何关系；想遮盖 iframe，必须在同级 DOM 插入遮罩层，并确保该遮罩的父容器有更高堆叠优先级
• 同一上下文中，未设 z-index 的定位元素默认归入 z-index: auto 层，渲染顺序按 HTML 出现先后

真正决定最终渲染顺序的，是浏览器构建的堆叠上下文树结构，而不是单个 z-index 数值。最容易被忽略的是：你以为在调整个别按钮的层级，其实是在调试整棵上下文嵌套链——从目标元素往上逐层检查父级是否悄悄创建了“隔离卡”，比反复改数字管用得多。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！