在网页开发过程中，多个元素出现重叠是常见的情况，比如弹窗覆盖在页面内容上方、导航栏固定在顶部遮挡其他元素等场景，都需要通过css控制元素的显示层级。而元素层级的生效和position属性密切相关，只有理解两者的结合规则，才能正确实现预期的布局效果。
position属性对层级的基础影响
position是css中用于控制元素定位方式的属性，它的不同取值会直接影响元素是否支持层级调整，以及默认的层级表现。
position的常用取值
- static：默认值，元素按照正常文档流排列，不支持top、right、bottom、left等定位属性，也不支持z-index调整层级，即使设置了z-index也不会生效。
- relative：相对定位，元素相对于自身原来的位置进行偏移，不会脱离文档流，支持z-index调整层级。
- absolute：绝对定位，元素脱离文档流，相对于最近的非static定位的父元素定位，支持z-index调整层级。
- fixed：固定定位，元素脱离文档流，相对于浏览器视口定位，支持z-index调整层级。
- sticky：粘性定位，元素在跨越特定阈值前为相对定位，之后为固定定位，支持z-index调整层级。
默认层级规则
如果元素没有设置z-index，那么后出现的元素会覆盖在先出现的元素上方，前提是这些元素都开启了非static定位。如果元素都是static定位，那么即使有重叠也不会产生层级覆盖，只会按照文档流顺序依次排列。
z-index属性的使用规则
z-index是用来控制元素在Z轴方向层级的属性，数值越大，元素显示越靠上，它只有在元素开启了非static定位时才会生效。
基本用法
z-index可以设置整数值，也可以设置负值，负值表示元素会显示在普通文档流元素的下方。下面是一个简单的示例：
/* 父容器 */
.container {
position: relative;
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
/* 第一个子元素 */
.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 150px;
height: 150px;
background-color: #ff0000;
z-index: 1;
}
/* 第二个子元素 */
.box2 {
position: absolute;
top: 80px;
left: 80px;
width: 150px;
height: 150px;
background-color: #00ff00;
z-index: 2;
}
上面的代码中，box2的z-index值比box1大，所以box2会显示在box1的上方，即使box2在HTML结构中出现在box1之后，只要z-index设置合理，就能控制显示顺序。
层级上下文的影响
z-index的生效会受到层级上下文的限制，每个开启了非static定位的元素都会创建一个层级上下文，子元素的z-index只在当前父元素的层级上下文中生效，不会影响到父元素外部的层级比较。
比如下面的场景：
<div class="parent1">
<div class="child1"></div>
</div>
<div class="parent2">
<div class="child2"></div>
</div>
.parent1 {
position: relative;
z-index: 1;
width: 200px;
height: 200px;
background-color: #eee;
}
.child1 {
position: absolute;
z-index: 100;
width: 100px;
height: 100px;
background-color: #ff0000;
}
.parent2 {
position: relative;
z-index: 2;
width: 200px;
height: 200px;
background-color: #eee;
margin-top: -50px;
}
.child2 {
position: absolute;
z-index: 1;
width: 100px;
height: 100px;
background-color: #00ff00;
}
在这个例子中，child1的z-index是100，child2的z-index是1，但是parent2的z-index比parent1大，所以child2会显示在child1的上方，因为子元素的层级无法突破父元素创建的层级上下文。
常见层级问题及解决方法
z-index设置不生效
如果发现设置了z-index但是层级没有变化，首先检查元素是否开启了非static定位，只有position为relative、absolute、fixed、sticky时，z-index才会生效。如果元素是static定位，设置z-index不会有任何效果。
层级覆盖不符合预期
如果出现层级覆盖和预期不一致的情况，需要检查元素的层级上下文，确认父元素的z-index设置，避免子元素的高z-index被父元素的低层级限制。可以通过浏览器的开发者工具查看元素的层级上下文结构，快速定位问题。
实际场景示例：弹窗层级控制
弹窗需要显示在所有页面内容的上方，这时候就需要结合position和z-index来实现。下面是一个简单的弹窗实现示例：
<div class="page-content">
<p>这是页面正文内容</p>
<button class="open-btn">打开弹窗</button>
</div>
<div class="modal-mask">
<div class="modal-content">
<p>这是弹窗内容</p>
<button class="close-btn">关闭弹窗</button>
</div>
</div>
/* 页面内容样式 */
.page-content {
position: relative;
z-index: 1;
padding: 20px;
}
/* 弹窗遮罩层 */
.modal-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: none;
}
/* 弹窗内容 */
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 20px;
background-color: #fff;
z-index: 1001;
}
// 打开弹窗
document.querySelector('.open-btn').addEventListener('click', function() {
document.querySelector('.modal-mask').style.display = 'block';
});
// 关闭弹窗
document.querySelector('.close-btn').addEventListener('click', function() {
document.querySelector('.modal-mask').style.display = 'none';
});
这个示例中，弹窗遮罩层使用fixed定位，z-index设置为1000，弹窗内容z-index设置为1001，确保弹窗内容显示在遮罩层上方，同时整个弹窗显示在页面内容的上方，实现了预期的层级效果。