掌握CSS相对与绝对定位：解决图片叠加与层叠问题
在网页开发中，我们经常会遇到需要把多个元素重叠摆放、或者让某个元素固定在容器特定位置的场景，比如制作图片轮播的指示器、商品卡片的标签角标、或者多图层叠加的展示效果。这时候CSS的定位属性就派上了用场，其中相对定位和绝对定位是最常用也最容易混淆的两个属性，本文会通过实际案例讲解两者的用法和配合方式，帮你解决图片叠加与层叠相关的开发问题。
一、CSS定位基础概念
CSS的position属性用于指定元素在文档中的定位方式，常见取值有static、relative、absolute、fixed、sticky，默认值是static，也就是元素按照正常文档流排列。我们重点要讲的是relative（相对定位）和absolute（绝对定位）。
定位相关的偏移属性有四个：top、right、bottom、left，用来设置元素相对于参照位置的偏移距离，只有position取值不是static的时候，这些属性才会生效。
二、相对定位（relative）的使用
相对定位的元素会先按照正常文档流排列，然后相对于自己原来的位置进行偏移，偏移后原来的位置仍然会保留，不会被其他元素占据。
我们来看一个简单的示例，用一个图片容器和内部的小标签来演示相对定位的作用：
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 图片容器样式 */
.img-container {
width: 300px;
height: 200px;
margin: 50px auto;
border: 2px solid #e5e5e5;
/* 后续会在这里添加相对定位，作为绝对定位元素的参照 */
}
/* 容器内的图片样式 */
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 相对定位的标签样式 */
.tag {
position: relative; /* 开启相对定位 */
top: -180px; /* 相对于自己原来的位置向上偏移180px */
left: 20px; /* 相对于自己原来的位置向右偏移20px */
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #ff4d4f;
color: #fff;
font-size: 14px;
border-radius: 4px;
}<div class="img-container"> <img src="https://ipipp.com/sample-img.jpg" alt="示例图片"> <div class="tag">热门</div> </div>
上面的代码中，tag元素开启了相对定位，它会相对于自己原本在文档流中的位置向上移动180px、向右移动20px，而且它原来的位置不会被其他元素填充，只是视觉上发生了偏移。
三、绝对定位（absolute）的使用
绝对定位的元素会脱离正常文档流，不再占据原来的位置，其他元素会忽略它的存在正常排列。它的参照位置是最近的一个开启了定位（position取值不是static）的祖先元素，如果所有祖先都没有开启定位，那么会相对于初始包含块（一般是html元素或者浏览器视口）进行定位。
我们修改上面的示例，把标签改成绝对定位，让它相对于图片容器固定位置：
/* 图片容器样式，新增相对定位作为参照 */
.img-container {
width: 300px;
height: 200px;
margin: 50px auto;
border: 2px solid #e5e5e5;
position: relative; /* 开启相对定位，作为内部绝对定位元素的参照 */
}
/* 容器内的图片样式 */
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 绝对定位的标签样式 */
.tag {
position: absolute; /* 开启绝对定位 */
top: 10px; /* 相对于参照容器顶部偏移10px */
right: 10px; /* 相对于参照容器右侧偏移10px */
width: 60px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #ff4d4f;
color: #fff;
font-size: 14px;
border-radius: 4px;
}<div class="img-container"> <img src="https://ipipp.com/sample-img.jpg" alt="示例图片"> <div class="tag">热门</div> </div>
这里给img-container开启了相对定位，虽然它没有发生偏移，但是已经成为了定位元素，所以内部的tag元素开启绝对定位后，就会相对于这个容器进行定位，固定在容器的右上角距离顶部和右侧各10px的位置，而且tag元素脱离文档流，不会影响图片的排列。
四、解决图片叠加与层叠问题
当多个元素重叠的时候，我们可以通过z-index属性来控制它们的层叠顺序，z-index的取值是整数，数值越大，元素就越靠上层，默认值是0。注意只有开启了定位的元素（position不是static），z-index才会生效。
我们来看一个多图片叠加的场景，比如做一个图片画廊的预览效果，有多张图片叠加，点击可以切换顺序：
/* 画廊容器 */
.gallery {
width: 500px;
height: 300px;
margin: 50px auto;
position: relative; /* 作为内部图片的参照 */
}
/* 画廊内的图片通用样式 */
.gallery img {
position: absolute; /* 所有图片都开启绝对定位，重叠在容器内 */
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
/* 默认所有图片z-index为1 */
z-index: 1;
transition: z-index 0.3s ease;
}
/* 处于最上层的图片，z-index更高 */
.gallery img.active {
z-index: 3;
}
/* 中间层的图片 */
.gallery img.middle {
z-index: 2;
}<div class="gallery"> <img src="https://ipipp.com/img1.jpg" alt="图片1" class="active"> <img src="https://ipipp.com/img2.jpg" alt="图片2" class="middle"> <img src="https://ipipp.com/img3.jpg" alt="图片3"> </div>
上面的代码中，所有图片都开启了绝对定位，所以会完全重叠在gallery容器内。我们通过给不同图片添加不同的类名，设置不同的z-index，让带有active类的图片显示在最上层，middle类的图片在中间层，没有特殊类的图片在最底层。如果需要切换顺序，只需要通过JavaScript修改对应图片的类名，改变它的z-index值就可以实现层叠顺序的切换。
五、常见注意事项
- 绝对定位的元素一定要找对参照的祖先定位元素，不然容易出现定位偏离预期的问题，如果不确定，可以给直接父容器开启相对定位，即使不设置偏移属性，也可以作为参照。
- 相对定位如果没有设置偏移属性，元素看起来和正常排列没有区别，但是已经成为了定位元素，可以作为内部绝对定位元素的参照。
z-index只在定位元素上生效，如果元素没有开启定位，设置z-index是不会有任何效果的。- 当多个元素
z-index相同时，后渲染的元素会覆盖先渲染的元素，也就是文档中靠后的元素会显示在上面。
掌握了相对定位和绝对定位的配合方式，以及z-index的层叠控制，就可以轻松解决大部分图片叠加、元素固定位置的开发需求，在实际项目中多尝试不同的场景，就能更熟练地运用这些属性。