浮动元素与定位元素的叠加规则基础
在CSS布局中，浮动元素通过float属性脱离标准文档流，定位元素通过position属性脱离或相对标准文档流定位。当两类元素在空间上出现重叠时，默认的显示顺序遵循层叠上下文规则，而position和z-index是控制层叠顺序的核心属性。
position属性的取值影响
position属性有static、relative、absolute、fixed、sticky五种取值，其中只有取值不为static的元素，z-index属性才会生效。static是元素默认的定位方式，此时元素处于标准文档流中，z-index设置无效，层叠顺序遵循文档流先后顺序，后出现的元素会覆盖先出现的元素。
relative是相对定位，元素保留原有文档流位置，偏移后可能与其他元素重叠，此时设置z-index可以调整层叠顺序。absolute是绝对定位，元素完全脱离文档流，相对于最近的已定位祖先元素定位，z-index生效。fixed是固定定位，相对于视口定位，同样支持z-index调整层叠。
z-index的作用逻辑
z-index用来设置元素的层叠等级，取值可以是正整数、负整数或0，数值越大的元素会显示在数值越小的元素上方。需要注意的是，z-index只在同一个层叠上下文中比较才有意义，不同层叠上下文的元素，层叠顺序由父级层叠上下文的z-index决定，子级z-index再高也无法突破父级上下文的层叠限制。
具体调整方法演示
基础场景：浮动元素与相对定位元素叠加
先看一个基础示例，一个浮动元素和一个相对定位元素出现叠加，默认情况下后出现的元素会覆盖先出现的元素：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
.float-box {
float: left;
width: 150px;
height: 150px;
background-color: #a1d6ff;
}
.pos-box {
position: relative;
width: 150px;
height: 150px;
background-color: #ffb6c1;
top: 30px;
left: 80px;
}
</style>
</head>
<body>
<div class="container">
<div class="float-box">浮动元素</div>
<div class="pos-box">相对定位元素</div>
</div>
</body>
</html>
上述代码中，相对定位元素后于浮动元素出现，所以粉色方块会覆盖蓝色浮动方块。如果要让浮动元素显示在上层，可以给浮动元素设置position为relative，同时设置更高的z-index：
.float-box {
float: left;
width: 150px;
height: 150px;
background-color: #a1d6ff;
position: relative; /* 设置定位让z-index生效 */
z-index: 2; /* 更高的层叠等级 */
}
.pos-box {
position: relative;
width: 150px;
height: 150px;
background-color: #ffb6c1;
top: 30px;
left: 80px;
z-index: 1; /* 更低的层叠等级 */
}
进阶场景：绝对定位元素与浮动元素叠加
绝对定位元素脱离文档流，和浮动元素叠加时，默认层叠顺序同样受文档流顺序影响，给绝对定位元素设置z-index即可调整显示顺序：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.wrap {
width: 400px;
height: 300px;
position: relative;
border: 1px solid #999;
}
.fl-ele {
float: left;
width: 200px;
height: 200px;
background-color: #98fb98;
}
.ab-ele {
position: absolute;
width: 200px;
height: 200px;
background-color: #ffd700;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="fl-ele">浮动元素</div>
<div class="ab-ele">绝对定位元素</div>
</div>
</body>
</html>
如果要让绝对定位元素显示在上层，只需要给.ab-ele设置z-index: 1即可，因为绝对定位元素默认position不是static，z-index直接生效。
注意事项
- 只有position取值不为static的元素，z-index才会生效，浮动元素本身不支持z-index，需要先设置position为非static值才能用z-index调整层叠。
- z-index的比较仅在同一层叠上下文中有效，如果父元素创建了层叠上下文，子元素的z-index无法突破父元素的层叠限制。
- 不要滥用z-index，尽量通过合理的文档流顺序和定位方式减少层叠冲突，避免设置过高的z-index数值导致后续维护困难。
- 当元素设置opacity小于1、transform不为none等属性时，也会创建新的层叠上下文，此时需要注意层叠上下文的变化对z-index比较的影响。
常见问题解答
为什么给浮动元素设置z-index没有效果？
因为浮动元素的position默认是static，z-index在static定位下不生效，需要先给浮动元素设置position为relative、absolute等取值，再设置z-index才会生效。
z-index设置很大的数值还是无法覆盖其他元素？
这种情况大概率是元素处于不同的层叠上下文中，检查父元素是否创建了层叠上下文，比如父元素设置了position+非auto的z-index、opacity小于1等属性，此时子元素的z-index只能和同父层叠上下文的子元素比较，无法覆盖父层叠上下文外的元素。