在网页布局开发中，后续区块覆盖首区块是较为常见的样式异常问题，这类问题通常和CSS的定位规则、层叠上下文创建逻辑以及z-index属性的使用方式直接相关，下面我们从原因到解决方案逐步展开说明。
问题常见触发原因
要解决问题首先需要明确常见的触发场景，大部分覆盖问题都来自以下几类情况：
- 首区块没有设置定位属性，或者定位属性为static，同时没有设置z-index，而后续区块设置了position为relative、absolute或fixed且z-index值大于0
- 首区块和后续区块分别处于不同的层叠上下文中，后续区块所在的层叠上下文层级高于首区块所在的层叠上下文
- 误给首区块设置了负的z-index值，或者后续区块的z-index值被设置得过高
- 父容器的overflow、opacity、transform等属性意外创建了层叠上下文，导致内部元素的层叠规则不符合预期
核心解决思路
解决这类问题的核心是先明确两个区块的层叠上下文归属，再调整对应的定位属性和z-index值，具体可以按照以下步骤操作：
第一步：检查定位属性设置
首先确认首区块是否设置了非static的定位属性，如果首区块需要保持文档流正常排列，不需要设置定位的话，就要排查后续区块的定位是否必要。如果后续区块的定位是业务必需，那么需要给首区块也设置对应的定位属性，避免层叠规则异常。
第二步：调整z-index值
在两者都设置了非static定位的前提下，给首区块设置比后续区块更高的z-index值即可。需要注意z-index只对定位元素生效，没有设置定位的元素设置z-index不会起作用。
第三步：排查层叠上下文
如果调整z-index后没有效果，就需要检查两个区块是否被不同的层叠上下文包裹。常见的会创建层叠上下文的属性包括opacity小于1、transform不为none、flex或grid容器的子元素等，需要把两个区块放到同一个层叠上下文中，再调整z-index。
代码示例
下面给出一个典型的异常场景和修复后的代码：
异常场景代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>布局覆盖异常示例</title>
<style>
.first-block {
width: 200px;
height: 200px;
background-color: #4CAF50;
/* 没有设置定位属性，z-index不生效 */
}
.second-block {
width: 200px;
height: 200px;
background-color: #2196F3;
position: absolute;
top: 50px;
left: 50px;
z-index: 10;
}
</style>
</head>
<body>
<div class="first-block">首区块</div>
<div class="second-block">后续区块</div>
</body>
</html>
修复后的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>布局覆盖修复示例</title>
<style>
.first-block {
width: 200px;
height: 200px;
background-color: #4CAF50;
position: relative; /* 设置非static定位，让z-index生效 */
z-index: 20; /* 设置比后续区块更高的z-index值 */
}
.second-block {
width: 200px;
height: 200px;
background-color: #2196F3;
position: absolute;
top: 50px;
left: 50px;
z-index: 10;
}
</style>
</head>
<body>
<div class="first-block">首区块</div>
<div class="second-block">后续区块</div>
</body>
</html>
注意事项
在调整布局时还需要注意以下几点：
- 不要随意给所有元素设置很高的z-index值，避免后续其他元素层叠时出现新的冲突
- 如果页面中存在模态框、下拉菜单这类需要置顶的元素，可以给它们设置单独的较高z-index，同时避免和其他业务区块的层级混淆
- 使用
position:fixed的元素会默认创建层叠上下文，如果固定定位的元素出现覆盖异常，需要检查其所在容器的层叠上下文情况