浮动元素需配合position: relative才能使用z-index控制堆叠顺序，因z-index仅对定位元素生效。1. 给浮动元素添加position: relative；2. 设置z-index值以调整层级；3. 注意父级堆叠上下文影响；4. 典型应用如角标、悬浮按钮等。数值宜简洁，避免混乱。
在CSS中，浮动（float）本身不会创建新的层级上下文，而 z-index 只在定位元素（即 position 值为 relative、absolute、fixed 或 sticky）上生效。因此，要实现通过 z-index 控制浮动元素的堆叠顺序，必须结合 position: relative 使用。
理解 z-index 与定位的关系
z-index 仅对已定位元素起作用。即使一个元素设置了 float，如果它没有设置 position 为 relative、absolute 等，z-index 将不会生效。
解决方法是：给需要控制层级的浮动元素添加 position: relative，再配合 z-index 来调整堆叠顺序。
如何结合 float、relative 和 z-index
以下是一个典型用法示例：
.box1 {
float: l
eft;
width: 100px;
height: 100px;
background: red;
position: relative;
z-index: 2;
}
.box2 {
float: left;
width: 100px;
height: 100px;
background: blue;
position: relative;
z-index: 1;
}
eft;
width: 100px;
height: 100px;
background: red;
position: relative;
z-index: 2;
}
.box2 {
float: left;
width: 100px;
height: 100px;
background: blue;
position: relative;
z-index: 1;
}
在这个例子中，虽然两个元素都使用了 float:left，但由于 .box1 的 z-index 更高，它会在 .box2 之上显示，即使它们在文档流中相邻。
常见注意事项
- 父容器可能影响堆叠上下文：如果某个祖先元素设置了 z-index 并建立了堆叠上下文，那么子元素的 z-index 将只在该上下文中有效。
- float 不等于层叠控制：仅靠 float 的先后顺序不能可靠控制上下层关系，必须依赖 z-index 和定位。
- 避免过度使用 z-index：保持数值简洁，如 1、2、10、99、100，便于维护。
实际应用场景
这种技术常用于：
- 浮动按钮悬浮在内容之上
- 导航菜单覆盖在轮播图上
- 标签角标（如“新”、“热”）浮现在图片右上角
例如，一个带角标的商品卡片：
.badge {
float: right;
background: orange;
color: white;
padding: 4px;
position: relative;
z-index: 5;
}
.card {
float: left;
position: relative;
z-index: 1;
}
这样就能确保角标始终显示在卡片内容之上。
基本上就这些。只要记住：浮动元素想用 z-index，就必须加 position: relative，然后设定层级数值即可精准控制显示顺序。不复杂但容易忽略关键点。
