浮动元素本身不参与z-index计算，因z-index仅对position为relative/absolute/fixed/sticky的定位元素生效；float属布局行为，非定位模式，故设z-index无效。
浮动元素本身不参与 z-index 计算，它没有自己的堆叠上下文，也不受 z-index 控制——这是最常被误判的起点。
为什么 float 元素设置 z-index 无效
因为 z-index 只对「定位元素」生效，即 position 值为 relative、absolute、fixed 或 sticky 的元素。而 float 不属于定位属性，即使你给一个 float: left 的元素加上 z-index: 999，浏览器也会直接忽略它。
常见错误现象：
- 浮动图片被后面一个
position: relative的按钮遮住，加了z-index也没用 - 浮动导航栏和固定定位的弹窗重叠顺序不符合预期，调
z-index不起作用
根本原因：浮动元素在层叠顺序中处于「普通流 + 浮动层」这一级，它比普通块级元素高、但比所有定位元素低（除非该定位元素显式设置了负 z-index）。
浮动元素实际参与的层叠位置在哪
根据 CSS2.1 层叠规则，同一容器内元素的默认堆叠顺序（从底到顶）是：
- 背景和边框（父容器的）
- 普通流中的块级元素（如
div、p） -
浮动元素（无论
float: left还是right，统一在此层） - 行内内容（文字、
span等，能“绕”浮动元素） - 定位元素（
position != static），按文档流顺序或z-index排序
这意味着：
- 一个未定位的浮动盒子，永远压不住后面一个
position: relative的盒子（哪怕后者没设z-index） - 但浮动盒子会盖住它前面的普通块级元素（比如一个没定位的
div） - 如果想让浮动元素「浮在最上面」，唯一办法是把它变成定位元素：
position: relative+z-index
浮动与定位元素混排时的层级陷阱
当浮动元素和定位元素共存，且父容器也设置了 position 或触发了新的堆叠上下文（如 opacity: 0.99、transform、will-change），层级关系会突然「重置」——浮动元素可能被整个压到新上下文的底层。
典型场景：
- 父容器设了
position: relative且z-index: 1→ 它创建了新堆叠上下文 - 子元素 A 是
float: left，子元素 B 是position: absolute→ B 的z-index只在父上下文中比较，A 则被当作「无上下文元素」塞进父上下文底部 - 结果：B 总是盖着 A，哪怕 A 在 HTML 中写在 B 后面
规避方式：
- 避免对浮动元素的父容器设置
z-index（尤其是非auto值） - 把浮动元素改为
position: relative+float: left（float 仍生效，但获得定位资格） - 若必须混用，统一用定位替代浮动：用
display: flex或grid替代 float 布局
浮动元素想控制层级？先让它「定位化」
真正可控的方案不是硬调 z-index，而是让浮动元素「升级」为定位元素。这不会破坏布局，反而更稳定：
.float-box {
float: left;
position: relative; /* 关键：激活定位能力 */
z-index: 10; /* 现在生效 */
}
注意点：
-
position: relative不改变元素原始位置，所以视觉上几乎无变化 - 一旦加了
position: relative，该元素就建立了自己的堆叠上下文（哪怕z-index: auto） - 它的子元素若设
z-index，只在它内部生效，不影响外部层级
最易被忽略的是：浮动不是一种「独立的层叠等级」，它只是文档流中一个临时偏移状态；真要精细控层，就得走出浮动，进入定位体系——这不是妥协，是回归 CSS 层叠模型的设计本意。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
