z-index不生效的主因是祖先元素创建了层叠上下文；浮动元素不产生层叠上下文且z-index无效；绝对定位元素默认覆盖浮动元素；ie6–8存在浮动提升bug；最终层级由层叠顺序和上下文决定。
z-index 不生效？先看父容器有没有「层叠上下文」
绝对定位元素的 z-index 不起作用，大概率是因为它的某个祖先元素悄悄创建了层叠上下文——比如设置了 opacity 小于 1、transform 非 none、filter、will-change，甚至 position: fixed。一旦形成层叠上下文，子元素的 z-index 就只在该上下文内比较，不会和外部元素直接比高低。
实操建议：
- 用浏览器开发者工具的「Layers」面板或「Computed」标签页，检查目标元素及其父级是否触发了层叠上下文（看
transform、opacity等属性值） - 若必须保留
transform或opacity，又想让子元素“突围”，可把该子元素移出有层叠上下文的父容器（DOM 位置调整），或改用position: fixed+z-index拉高（注意 viewport 依赖） - 浮动元素（
float）本身不产生层叠上下文，也不支持z-index——它永远处于「普通流层叠水平」，天然低于设置了position: relative/absolute/fixed的元素
浮动元素和绝对定位元素重叠时，谁压谁？
纯 CSS 规则下：浮动元素默认「不参与层叠顺序竞争」，而绝对定位元素属于「定位上下文中的层叠元素」，只要后者没被包裹在更低层级的层叠上下文中，它就一定盖在浮动元素上面。
常见错误现象：
- 给浮动盒子加了
z-index——无效，因为float元素必须配合position（非static）才能使z-index生效 - 以为
clear能影响层级 ——它只控制环绕行为，和 z 轴完全无关 - 在 Flex/Grid 容器里还用
float布局，结果浮动失效且层级混乱（现代布局中float已退化为文本环绕专用）
简单验证示例：
<div style="position: absolute; z-index: 10;">我绝对定位</div><br><div style="float: left;">我浮动</div>——无论 DOM 顺序如何，绝对定位元素始终显示在上层。
IE6–8 的浮动提升 bug：为什么它有时反而盖住了绝对定位？
老版本 IE（尤其是 IE6）有个著名缺陷：浮动元素会「自动获得类似 relative 的定位能力」，并意外获得自己的层叠上下文，导致其 z-index 表现异常——哪怕没写 position，它也可能盖过本该更高的绝对定位元素。
这并非标准行为，而是渲染引擎 bug。现代浏览器已彻底修复，但如果你还在维护遗留系统：
- 避免对浮动元素依赖
z-index控制层级 - 统一把需要分层的元素都显式设为
position: relative或absolute，再配z-index - 用
*zoom: 1触发 hasLayout 在 IE6/7 中可能加剧该问题，慎用
真正决定谁在最上层的，是「层叠顺序」而非「定位方式」
浮动、绝对定位、普通块元素，最终谁在最上，取决于它们各自所处的「层叠上下文」中的「层叠水平」顺序，而不是“谁更‘定位’”。这个顺序是固定的：背景/边框 → 负 z-index → 普通文档流内容（含浮动） → z-index: auto 的定位元素 → 正 z-index 定位元素。
所以关键判断点是：
- 目标元素是否在同一个层叠上下文中？如果不是，比的是各自上下文根元素的层叠水平
- 它的
z-index是数值还是auto？auto就按文档流顺序排，不参与数字比大小 - 它的父容器是否因
opacity、transform等隐式创建了新层叠上下文？这是最常被忽略的层级断层点
复杂点从来不在「怎么写」，而在「谁跟谁比」——浏览器比的是树状结构里的相对位置，不是平面上的 CSS 属性罗列。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
