index.html中如何设置元素的层叠顺序？

z-index 无效的主因是元素未定位；必须设 position: relative/absolute/fixed/sticky 才生效，static 下被忽略；父元素含 transform 或 opacity 也会使子元素 z-index 失效。

直接给元素设 z-index 没反应，大概率是因为它没定位——z-index 必须配合 position: relative、absolute、fixed 或 sticky 才生效，对默认的 static 元素完全无效。

为什么加了 z-index 还是不叠？

最常见原因是：目标元素的 position 仍是 static（HTML 默认值），此时 z-index 被浏览器直接忽略。

• 检查 computed styles，确认 position 确实不是 static
• 哪怕只是微调位置，也得显式写上 position: relative，不能只靠 top/left 等偏移属性
• z-index: auto 和没写 z-index 表现不同：前者不创建新层叠上下文，后者仍属默认组，嵌套时可能出意料结果

父容器用了 transform 或 opacity，子元素 z-index 失效了

只要父元素设置了 transform、opacity（filter、will-change 等属性，就会隐式创建新的层叠上下文——子元素的 z-index 只在该父容器内部起作用，无法越过父级和外部兄弟元素比高低。

• 例如：一个 opacity: 0.99 的卡片包裹弹窗，即使弹窗 z-index: 9999，也盖不住卡片外的导航栏
• 临时解法：把弹窗移出该父容器 DOM 结构；长期解法：避免在需要“穿透层级”的父级上滥用这些属性
• 用浏览器 devtools 的 “Layers” 面板可直观看到层叠上下文边界

z-index 数值该设多少才合理？

不要一上来就写 z-index: 9999。数值本身没有绝对意义，只在同层叠上下文中有效；过大的数会掩盖真实层级关系，后续维护困难。

立即学习“前端免费学习笔记（深入）”；

• 推荐用小整数分组：比如 --z-nav: 100、--z-dropdown: 110、--z-modal: 1000，用 CSS 自定义属性统一管理
• 负值合法：z-index: -1 会让元素沉到父容器背景之下，但仍在父容器内容之前（除非父容器也设了 background）
• 未设 z-index 的定位元素，默认按 HTML 文档流顺序堆叠：后写的盖在先写的上面

真正难的不是写多少个 z-index，而是理清谁创建了层叠上下文、谁在哪个上下文里——DOM 结构 + CSS 属性共同决定渲染顺序，单看一个元素的 z-index 值，往往看不出全貌。