z-index对浮动元素无效，因float不创建层叠上下文且z-index仅对定位元素生效；需同时添加position:relative和z-index才生效，推荐改用flex或grid布局。
浮动元素重叠时 z-index 为什么无效
因为 float 不会创建新的层叠上下文（stacking context），而 z-index 只对「定位元素」（position 值为 relative、absolute、fixed 或 sticky）生效。单纯给一个 float: left 的元素设置 z-index，浏览器直接忽略。
让 z-index 生效的最小改动
必须同时满足两个条件：加 position + 设 z-index。不需要改变布局逻辑，只需微调 CSS：
- 保留原有
float: left或float: right - 额外加上
position: relative（最安全，不脱离文档流） - 再设
z-index值（如z-index: 2）
.box {
float: left;
position: relative;
z-index: 2;
}
更推荐的替代方案：用 display: flex 或 grid 替代 float
浮动本就不是为层叠控制设计的，强行混用 float 和 z-index 容易引发意外堆叠顺序，尤其在嵌套容器中。现代布局中：
-
flex容器内子项默认按源顺序层叠，用z-index直接有效（只要子项有position） -
grid同样支持z-index，且行列控制更直观 - 移除
float后，清除浮动（clear）、高度塌陷等问题一并消失
如果必须兼容老浏览器（IE9–），才考虑保留 float + position: relative 组合。
立即学习“前端免费学习笔记（深入）”；
检查层叠上下文是否被意外创建
即使加了 position 和 z-index，仍重叠？可能是父容器触发了新的层叠上下文，把子元素“锁死”在局部层级里。常见诱因包括：
- 父元素设置了
opacity小于 1 - 父元素有
transform（哪怕只是transform: translateZ(0)） - 父元素是
position: fixed或absolute且带z-index - 父元素用了
will-change: transform
此时子元素的 z-index 只在该父容器内部起作用，对外不可见。解决方法：要么提升父级的 z-index，要么删掉触发层叠上下文的属性。
z-index 硬凑在一起，本质是在用错工具——真正要控制前后关系，得先确保元素处于可层叠的上下文中，而不是靠 float 推来挤去。 
