z-index对浮动元素无效，因其仅作用于定位元素；必须先移除float并添加position: relative（或absolute/fixed），再设z-index才能生效，且需避免父容器意外创建层叠上下文。
浮动元素本身不能用 z-index
直接给 float 元素设置 z-index 是无效的，浏览器会忽略它。因为 z-index 只对定位元素（position 值为 relative、absolute、fixed 或 sticky）生效，而 float 不属于定位上下文——它只是让元素“浮动”并影响周围文本流，仍处于普通文档流中。
想控制浮动元素层级，必须先转成定位元素
常见做法是把 float 换掉，改用 position: relative（最安全），再加 z-index：
- 去掉
float: left/right，避免与定位冲突 - 加上
position: relative（保留原布局位置，不破坏文档流） - 再设
z-index值，比如z-index: 10 - 如果需要脱离文档流，用
position: absolute，但得注意父容器是否设置了position: relative作为参照
示例：
.nav-item {
/* ❌ 错误：float + z-index 无效 */
float: left;
z-index: 5;
}
<p>.nav-item {
/<em> ✅ 正确：用 relative 替代 float </em>/
position: relative;
z-index: 5;
}</p>
为什么有人觉得“float 元素 z-index 生效了”？
那通常是因为该元素**同时被其他样式间接触发了定位上下文**，比如：
- 父容器设置了
transform（哪怕只是transform: translateZ(0)），会创建新堆叠上下文，子元素即使没设position，也可能意外参与层叠比较 - 元素本身有
opacity: 0.99或filter: blur(0)，也会创建堆叠上下文，干扰预期行为 - 开发者工具里看到
z-index没灰掉，但实际渲染没变——说明它被父级堆叠上下文截断了，子元素再高的z-index也出不去
真正要“浮在最上面”，关键不是 z-index 数值大小
而是确认它所在的堆叠上下文足够高。容易忽略的点：
- 检查父容器是否无意中设置了
z-index: 0或更低值（比如z-index: -1），这会让整个子树被压在底层 - 避免在多个层级上滥用
z-index: 9999，不如统一管理：比如顶部导航固定用z-index: 1000，弹窗用z-index: 2000，tooltip 用z-index: 3000 - 调试时用浏览器开发者工具的“Layers”面板或勾选“Show stacking order”，比猜数值更可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
