要控制浮动元素的层叠顺序，必须先将其变为定位元素。尽管浮动元素脱离标准流，但z-index仅对position为relative、absolute等的定位元素生效，对纯浮动元素无效。因此，需为浮动元素添加position: relative（即使不设偏移），再设置z-index值以实现层级控制。例如，.box1和.box2均为左浮动并设定了position: relative，此时z-index较大的.box1会显示在上方。需注意父容器若创建了新的层叠上下文（如使用transform、opacity或设置了z-index的定位容器），则子元素的层叠仅在其内部有效。常见误区是直接对浮动元素使用z-index而忽略添加position，导致设置无效。总之，z-index生效的前提是元素必须是定位元素，而非单纯浮动。
在CSS中，浮动元素（float）本身不会创建新的层叠上下文，而 z-index 只在定位元素（position: relative/absolute/fixed/sticky）上生效。因此，直接对浮动元素使用 z-index 通常不会产生预期的层叠效果。理解这一点是控制浮动元素层叠顺序的关键。
浮动与定位的关系
浮动元素虽然脱离了标准文档流，但它们仍然处于“普通流”的渲染层级体系中，其层叠行为受“堆栈上下文”和“堆栈级别”影响，但 z-index 对未定位的浮动元素无效。
要让 z-index 生效，必须先使元素成为“定位元素”：
- 给浮动元素添加 position: relative（即使不设置 top/left）
- 然后设置 z-index 值来控制层叠顺序
如何控制浮动元素的层叠顺序
实现浮动元素之间或与其它元素之间的层叠控制，需结合 float 和 position 使用：
立即学习“前端免费学习笔记（深入）”；
- 为需要控制层级的浮动元素添加 position: relative
- 设置不同的 z-index 值，数值越大越靠前
- 注意父容器是否形成新的层叠上下文（如设置了 opacity、transform 或 z-index 的定位容器）
示例：
.box1 {
float: left;
position: relative;
z-index: 2;
background: red;
}
.box2 {
float: left;
position: relative;
z-index: 1;
background: blue;
}
此时 .box1 会显示在 .box2 上方，尽管它们都是浮动元素。
常见误区与注意事项
开发者常误以为 float 元素可以直接通过 z-index 控制层级，结果发现无效。核心原因在于缺少定位属性。
- 仅 float 不触发 z-index 生效：必须配合 position
- 层叠上下文限制：父元素若创建了独立堆栈上下文，子元素的 z-index 只在该上下文中有效
- 非定位元素的 z-index 计算为 auto，等同于 0
基本上就这些。只要记住：想用 z-index，就得加 position。浮动本身不影响层叠控制能力，真正起作用的是是否为定位元素。
