浮动元素需配合position才能生效z-index，关键在于同一层叠上下文中通过relative或absolute定位设置层级，避免父级opacity、transform等限制，推荐用flex或grid替代float布局以减少冲突。
当使用浮动（float）和层叠（z-index）时，元素的显示顺序可能不符合预期。这是因为 z-index 的作用依赖于定位上下文，而 float 本身不创建新的层叠上下文。要解决浮动元素之间的叠加与覆盖问题，关键在于理解 CSS 的层叠规则以及如何正确结合 position 和 z-index 使用。
理解 z-index 与定位的关系
z-index 只对已定位元素有效，即设置了 position 为 relative、absolute、fixed 或 sticky 的元素。浮动元素虽然脱离了标准文档流，但不会自动获得层叠控制能力。
如果两个元素都使用 float，但没有设置 position，那么 z-index 不会生效。
- 给需要控制层级的浮动元素添加 position: relative
- 再设置 z-index 值来定义堆叠顺序
浮动与 z-index 组合使用方法
若想让某个浮动元素浮在其他元素上方，需同时使用 float 和带有 z-index 的定位。
立即学习“前端免费学习笔记（深入）”；
示例：
.box1 {
float: left;
position: relative;
z-index: 1;
background: red;
}
.box2 {
float: left;
position: relative;
z-index: 2;
background: blue;
margin-left: -50px;
}
此时 .box2 会覆盖 .box1，因为它的 z-index 更高。
避免层叠上下文干扰
父元素如果建立了层叠上下文（如设置了 opacity、transform 或 z-index 数值），会限制子元素的 z-index 表现。即使子元素 z-index 很高，也可能被限制在父容器的层级内。
解决方案：
- 确保参与层叠比较的元素处于同一层叠上下文中
- 避免不必要的 transform 或 opacity 设置
- 必要时将高 z-index 元素移出低层级父容器
替代方案：使用 Flex 或 Grid 布局
现代布局中，flex 和 grid 更适合控制元素排列与层级，减少 float 与 z-index 冲突。
若仅为了实现横向排列或重叠效果，推荐：
- 用 display: flex 替代多个 float
- 用 position: absolute 配合 z-index 实现精确覆盖
- 利用 grid 的叠放能力（grid-area、z-index 结合）
基本上就这些。核心是：float 不触发层叠控制，必须配合 position 才能让 z-index 生效。理清层叠上下文关系，就能避免大多数覆盖问题。
