z-index 对浮动元素无效，因其本身不创建层叠上下文；只有当浮动元素添加 position 属性（如 relative、absolute）后，z-index 才生效，且需确保父子元素未意外创建新层叠上下文。
z-index 对浮动元素无效？先确认是否在同一个层叠上下文里
浮动元素（float）本身不创建层叠上下文，但一旦给它加了 position（比如 relative 或 absolute），又没设 z-index，它就按文档流顺序参与层叠——这时 z-index 才起作用。常见错误是只给一个元素设 z-index: 999，另一个完全没设定位，结果后者压在上面，因为未定位元素属于“层叠顺序最低的普通流内容”。
- 必须两个元素都设置了
position（relative、absolute、fixed或sticky）才能比较z-index -
float元素若没加position，它不会响应z-index，哪怕写了也无效 - 检查父容器有没有无意中创建了新的层叠上下文（比如加了
opacity: 0.99、transform、filter或will-change），这会让子元素的z-index被限制在该上下文内部
绝对定位元素被浮动元素盖住？优先检查渲染顺序和层叠等级
即使都加了 position，如果绝对定位元素的父容器是普通流，而浮动元素在 HTML 中出现在它后面，且两者没有显式 z-index，浮动元素仍可能视觉上覆盖前者——因为未指定 z-index 的定位元素默认属于“stack level 0”，而文档流中后出现的块会自然压在前面的定位块上（前提是它们不在同一层叠上下文里）。
- 给绝对定位元素显式设置
z-index: 1（或更高），同时确保它的父容器没创建隔离的层叠上下文 - 避免依赖 HTML 顺序来控制遮盖关系；浮动元素不是“天然层级高”，只是常被误以为“后来者居上”
- 用浏览器开发者工具的“Layers”面板或勾选“Show paint rectangles”观察实际合成层，确认是否真被裁剪或降级渲染
多个 z-index 值看起来没反应？可能是整数溢出或单位混淆
z-index 只接受无单位整数（z-index: 100 合法，z-index: 100px 无效并会被忽略）。有些框架或 CSS-in-JS 库会自动插入极大数值（如 z-index: 2147483647），后续再设 9999 就完全没用；更隐蔽的是，某些旧版浏览器对负值支持不稳定（比如 IE7 不支持 z-index: -1 在非定位元素上）。
- 用开发者工具检查计算后的
z-index值，确认是否为有效整数且未被覆盖 - 避免盲目堆砌超大数字，统一用小范围分组（例如
10用于弹窗遮罩，20用于弹窗主体，30用于顶部提示条） - 注意
z-index: auto和z-index: 0的区别：前者不创建层叠上下文，后者会——这会影响子元素的z-index参照系
移动端 Safari 或老版 Chrome 里 z-index 失效？留意 transform 和 will-change 的副作用
给任意祖先元素加 transform: translateZ(0)、transform: scale(1) 或 will-change: transform，都会强制创建新层叠上下文。此时子元素的 z-index 只在该上下文内生效，无法与外部其他上下文中的元素比大小。这是移动端最常被忽略的“隐形墙”。
立即学习“前端免费学习笔记（深入）”；
- 临时删掉疑似触发
transform或will-change的样式，看遮盖关系是否恢复 - 不要对整个
body或布局容器滥用will-change，尤其当里面还有弹窗、下拉菜单等需要跨层叠上下文交互的组件时 - 若必须用
transform做动画，考虑把需要高z-index的元素提到同级容器，绕过该上下文限制
z-index 数值本身，而是没意识到它从来不是全局排序器，而是一套嵌套的局部协议。每一层 position + z-index 都在悄悄划分领地，稍不注意，元素就困在自己的小世界里出不来。 
