z-index对浮动元素无效，因其仅作用于定位元素（position为relative/absolute/fixed/sticky）；浮动元素需先加position属性（如relative）才能启用z-index，且须确保父子元素未意外创建新层叠上下文。
z-index 对浮动元素根本无效，别白写了
给 float: left 的元素加 z-index: 999，浏览器会安静地忽略它——因为 z-index 只对定位元素起作用。浮动元素（float）不创建层叠上下文，也不参与层叠顺序计算，它只是“飘”在文档流旁边，绘制层级默认低于同级的 position: relative 或 absolute 元素。
常见错误现象：
- 浮动侧边栏被后面一个没设
position的<section></section>盖住 - 写了
z-index: 999的浮动按钮，在 DevTools 里看 computed 值仍是auto - 浮动元素和绝对定位弹窗重叠，但无论怎么调数字都盖不过去
解决办法只有一步：去掉 float，加上 position: relative（或 absolute），再配 z-index。例如：
.sidebar {
/* ❌ 错误：float + z-index */
float: left;
z-index: 10;
<p>/<em> ✅ 正确：用定位替代浮动，并显式设 z-index </em>/
position: relative;
z-index: 10;
}</p>
两个定位元素还是盖不住？检查是否掉进不同层叠上下文
即使两个元素都写了 position: relative 和 z-index，它们也可能不在同一个比较维度里。因为 z-index 不是全局排名，而是「相对于最近的层叠上下文祖先」生效。
触发层叠上下文的常见属性（哪怕你没意识到）：
-
position: relative+z-index（非auto） -
opacity: 0.99（小于 1 就行） -
transform: translateZ(0)或任何transform filter: blur(1px)will-change: transform
典型问题场景：
- 弹窗模块父容器有
opacity: 0.99→ 弹窗内部所有z-index都被锁死在这个小世界里，再高也出不去 - 导航栏
.nav { position: relative; z-index: 100 }，而右侧主内容区.main { position: relative; z-index: 200 }→ 整个.nav都会被.main盖住，里面按钮设z-index: 9999也没用
调试建议：
- 在 Chrome DevTools 的「Layers」面板中打开「Paint rectangles」，看哪些区域被单独合成为图层
- 选中元素，点「Computed」→ 拉到最底下找
stacking context标记，确认它属于哪一层 - 逐级往上点父元素，看第一个带 stacking context 的祖先是谁
浮动和定位元素必须共存时，怎么让它们不打架
老项目改不动、第三方组件强制用 float、或者就为图文环绕保留浮动——这时不能硬改布局，得靠隔离策略保命。
核心原则：**浮动归浮动，定位归定位，不让它们共享父容器或 DOM 层级关系**。
- 把浮动模块（如广告栏、文章侧边目录）和定位模块（如悬浮按钮、下拉菜单）拆到完全独立的容器中，比如一个挂
#float-zone，一个挂#fixed-overlay - 浮动容器自身要清除塌陷：
display: flow-root（推荐）或overflow: hidden，但注意后者可能意外裁剪 - 定位模块的父容器必须设
position: relative，确保absolute子项有明确参考点；不要让它嵌套在浮动容器内部 - 如果浮动块真要盖过某个定位块（极少见），唯一合法路径是：给浮动块加
position: relative+z-index，同时确保它的父容器没创建新层叠上下文
示例结构：
<div id="float-zone"><!-- 浮动内容 --></div>
<div id="fixed-overlay" style="position: relative">
<button style="position: absolute; z-index: 10">悬浮操作</button>
</div>
为什么有时候 z-index 设了却像没设一样
不是浏览器 bug，大概率是以下三个隐性问题之一：
-
z-index值写成带单位的：z-index: 100px或z-index: "100"→ 浏览器直接忽略整条声明 - 父容器用了
z-index: auto（默认值），但子元素又用了z-index: 0→ 后者会创建新层叠上下文，反而把子元素“关”进去了 - 某些框架（如 Ant Design、Element Plus）或 CSS-in-JS 库预设了极大
z-index（如2147483647），你设的999在它面前等于 0
真正难调的从来不是数值大小，而是搞不清谁跟谁在一个上下文里。别一上来就改数字，先用 DevTools 确认：
- 目标元素的
position是什么？是不是static？ - 它的
z-indexcomputed 值是多少？是不是auto？ - 它往上第一个非
static定位祖先，z-index是多少？有没有触发层叠上下文？
现代项目里，float 已不是布局主力。遇到层级混乱，优先想：能不能用 display: flex 或 grid 重构这块？它们天然不干扰定位逻辑，也省去一半 z-index 调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
