在HTML5页面开发中，多张图片叠放是常见需求，比如制作弹窗背景遮罩、悬浮装饰元素、图层叠加的视觉效果等，要实现图片的层级控制，核心依赖CSS的position属性和z-index属性配合完成。
一、设置图片层级的核心前提
很多开发者直接给图片设置z-index属性却发现没有效果，这是因为z-index属性有一个必要前提：元素必须设置position属性，且取值不能为static（static是position的默认值）。
可选的position取值包括：
- relative：相对定位，元素保留原有文档流位置，相对于自身原位置偏移
- absolute：绝对定位，元素脱离文档流，相对于最近的已定位父元素偏移
- fixed：固定定位，元素脱离文档流，相对于浏览器视口偏移
- sticky：粘性定位，结合了相对定位和固定定位的特点
二、z-index属性取值规则
z-index属性用于定义元素的堆叠顺序，取值规则如下：
- 取值为整数，可以是正数、负数或0
- 数值越大的元素，堆叠层级越高，会显示在数值小的元素上方
- 如果两个元素的
z-index取值相同，那么后渲染的元素会显示在先渲染的元素上方 - 子元素的
z-index只在父元素的堆叠上下文内生效，不会和父元素外部的元素的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>HTML5图片层级设置示例</title>
<style>
/* 容器设置相对定位，作为内部绝对定位元素的参照 */
.img-container {
position: relative;
width: 800px;
height: 400px;
margin: 20px auto;
border: 1px solid #ccc;
}
/* 背景图片，层级最低 */
.bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* 中间装饰图片，层级中等 */
.decorate-img {
position: absolute;
top: 50px;
left: 100px;
width: 200px;
height: 200px;
z-index: 2;
}
/* 前景图片，层级最高 */
.front-img {
position: absolute;
top: 150px;
left: 300px;
width: 150px;
height: 150px;
z-index: 3;
}
</style>
</head>
<body>
<div class="img-container">
<img class="bg-img" src="https://ipipp.com/bg.jpg" alt="背景图片">
<img class="decorate-img" src="https://ipipp.com/deco.jpg" alt="装饰图片">
<img class="front-img" src="https://ipipp.com/front.jpg" alt="前景图片">
</div>
</body>
</html>
四、常见问题排查
如果设置后图片层级没有生效，可以按照以下步骤排查：
- 检查图片是否设置了
position属性，且取值不是static - 检查
z-index的取值是否正确，是否存在父元素堆叠上下文限制 - 检查是否有其他CSS规则覆盖了
z-index或position属性，比如内联样式或者优先级更高的选择器 - 如果图片是
img标签，确认没有被父元素的overflow: hidden等属性裁剪
五、注意事项
需要注意，z-index属性对未设置position或者position: static的元素无效，同时如果父元素设置了opacity小于1、transform、filter等属性，会创建新的堆叠上下文，此时子元素的z-index无法突破父元素的层级限制。