z-index不生效的根本原因是元素未脱离普通文档流或未进入层叠上下文；需确保position为relative/absolute/fixed/sticky，且注意父容器隐式创建新层叠上下文的影响。
z-index 不生效？先确认元素是否脱离了普通文档流
很多情况下 z-index 看似写了但完全没反应，根本原因不是值设小了，而是该元素压根没进入「层叠上下文（stacking context）」。只有定位元素（position 为 relative、absolute、fixed 或 sticky）才支持 z-index；static 是默认值，写 z-index 直接被忽略。
- 检查元素的
position是否已显式设置，不能只靠继承或浏览器默认 -
position: relative是最安全的起点——不改变布局位置，但能激活z-index - 父容器若设置了
transform、opacity 、<code>will-change等属性，会隐式创建新层叠上下文，导致子元素的z-index只在该上下文内生效，无法越过父级去和外部元素比高低
z-index 数值怎么设才真正起作用
z-index 的比较只发生在同一层叠上下文内，不是全局“谁大谁在上”。比如两个兄弟元素各自有 z-index: 999 和 z-index: 1，但如果它们的父容器分别创建了独立层叠上下文，且父级本身的层叠顺序是反的，那子元素再大也盖不过去。
- 避免盲目用超大数如
z-index: 999999，它解决不了上下文隔离问题 - 推荐用小而明确的层级体系：比如
z-index: 10（弹窗遮罩）、z-index: 20（弹窗内容）、z-index: 1（导航栏）、z-index: 0（普通内容） - 负值合法（如
z-index: -1），但会让元素沉到其父容器背景之下——前提是父容器没设置background，否则会被盖住看不见
定位方式对 z-index 行为的影响
position: absolute 和 position: fixed 元素天然脱离文档流，z-index 效果直观；但 position: relative 虽然保留占位，其 z-index 仍会参与层叠计算，可能把后续兄弟元素“顶下去”——这不是 bug，是规范行为。
-
absolute元素的层叠顺序由其最近的「已定位祖先」决定，而不是直接跟 body 比 -
fixed元素相对于视口定位，其层叠上下文通常以根元素（html）为边界，容易意外覆盖其他fixed或absolute元素 - 如果想让一个
relative元素浮起又不影响后续布局流，确保它没触发新的层叠上下文（比如别加transform），否则可能干扰相邻元素的绘制顺序
常见报错和调试技巧
浏览器开发者工具里看不到 z-index 生效，往往是因为元素根本没被识别为定位元素，或者被父级层叠上下文截断。Chrome DevTools 的「Layers」面板（需开启 Rendering > Paint flashing）能可视化层叠上下文边界，比猜更准。
- 检查 computed 样式中
position是否真为relative/absolute等，而非static - 右键元素 → “Show inherited” 查看是否有父级设置了
transform、filter、opacity等隐式创建上下文的属性 - 临时给疑似“卡住”的父容器加
outline: 1px solid red，观察是否意外形成了视觉隔离区 - 错误信息不会直接提示“z-index 失效”，但控制台可能显示
Invalid property value——通常是拼写错成z-index:后跟非数字或空值
层叠上下文的嵌套和隐式创建是最容易被跳过的环节，调 z-index 前先理清“谁跟谁比”，比反复改数值管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
