z-index只对定位元素（position为relative/absolute/fixed/sticky）生效；未设定位或父级创建层叠上下文会导致其失效。
z-index 只对已定位元素生效，没设 position（且值不为 static）的元素加 z-index 完全无效。
为什么写了 z-index 却没效果？
最常见原因是：元素没触发定位上下文。CSS 中只有 position 值为 relative、absolute、fixed 或 sticky 时，z-index 才起作用。写成 position: static（默认值）或干脆不写 position，z-index 就是摆设。
容易踩的坑：
- 父容器用了
position: relative，但子元素只写了z-index: 999，却漏掉子元素自己的position声明 - 用 Flex 或 Grid 布局时，误以为子项自动“可叠”，其实仍需显式加
position才能启用z-index - 某些框架（如 Vue/React 组件）内联样式覆盖了你写的
position，导致z-index失效
z-index 数值怎么选才靠谱？
z-index 支持正数、负数和 0，但别盲目堆大数。实际项目中建议按层级意图分段预留：
- 基础 UI 层（如背景、遮罩）：用
-1到9 - 内容主体层（卡片、表单）：用
10到99 - 浮层类（弹窗、下拉菜单、Tooltip）：用
100到999 - 全局强提示（如 Toast、全屏 Loading）：用
1000+，但避免硬写999999
数值本身无上限，但过大的数字（比如 2147483647）可能在旧版浏览器中溢出，或干扰后续调试判断。
多个 z-index 元素重叠时谁在上面？
表面看是“数值大者胜”，但真实规则依赖于 堆叠上下文（stacking context）。关键点：
- 每个
position元素若带z-index（包括0），就可能创建新的局部堆叠上下文 - 子元素的
z-index只在它所属的堆叠上下文中比较，不会跨上下文和父级兄弟比 - 如果两个元素没有共同堆叠上下文（比如分别属于不同
position: relative父容器），那它们的z-index数值之间毫无关系 - 没设
z-index的定位元素，默认处于该上下文的z-index: auto层，渲染顺序按 HTML 出现先后
简单验证：给父容器加 z-index: 1 和 position: relative，再给它内部两个子元素分别设 z-index: 99 和 z-index: 1，它们的相对顺序有效；但如果把这两个子元素移到不同父容器下，即使数值相同，谁上谁下就由父容器的 z-index 决定。
移动端或复杂布局下要注意什么？
某些场景下 z-index 表现会反直觉：
- iOS Safari 对
transform: translateZ(0)或will-change: transform敏感，可能意外创建新堆叠上下文，让预期外的元素“浮起来” - 使用
iframe时，其内部文档完全独立于父页的堆叠上下文，z-index无法跨 iframe 控制层级 - CSS 变量或动态生成的样式中，
z-index若被计算为NaN或空字符串，会被当作auto处理，等效于未设置
真正难的不是写 z-index，而是识别当前元素属于哪个堆叠上下文——这往往需要打开浏览器开发者工具，逐层检查 Computed 面板里的 z-index 和 stacking context 标识。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
