本文旨在解决在使用CSS绝对定位创建图像覆盖层时，覆盖层未能正确显示在图像之上的问题。通过分析HTML结构和CSS样式，我们将提供两种解决方案：一是调整父容器的定位方式，二是引入额外的容器元素来控制定位，并确保覆盖层正确应用`top`、`left`等定位属性。
在使用CSS进行布局时，经常会遇到需要将一个元素（例如覆盖层）相对于另一个元素进行绝对定位的情况。一个常见的场景是在图像上创建一个覆盖层，当鼠标悬停在图像上时，覆盖层会显示出来。但有时，即使设置了position: absolute和position: relative，覆盖层也可能无法正确显示在图像之上，而是显示在图像下方。以下我们将深入探讨这个问题，并提供解决方案。
问题分析
问题的核心在于绝对定位的元素会相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则会相对于初始包含块（通常是<html>元素）进行定位。因此，要使覆盖层正确显示在图像之上，需要确保图像的父容器被设置为position: relative。
解决方案一：调整父容器的定位
如果HTML结构如下：
立即学习“前端免费学习笔记（深入）”；
<div class="container-main">
<img class="nft" src="./images/GC.png" alt="nft">
<div class="overlay">
<a href="#" class="icon" title="view"></a>
<i class="fa-solid fa-eye"></i>
</div>
</div>并且CSS样式如下：
.container-main {
display: block;
justify-content: center;
width: auto;
padding: 2em;
max-width: 80rem;
background-color: hsl(216, 50%, 16%);
border-radius: 0.9375rem;
}
.nft {
position: relative;
width: 100%;
height: auto;
max-width: 21.875rem;
max-height: 21.875rem;
border-radius: 0.625rem;
}
.overlay {
position: absolute;
height: 100%;
width: 100%;
max-width: 21.875rem;
max-height: 21.875rem;
border-radius: 0.625rem;
opacity: 0;
transition: .3s ease;
background-color: hsl(178, 100%, 50%, .4);
}
.container-main:hover .overlay {
opacity: 1;
}
.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}正确的做法是将position: relative从.nft移动到.container-main，因为.container-main才是.overlay的直接父容器。同时，需要确保.overlay拥有明确的top、left、right或bottom属性，以便确定其定位。
修改后的CSS如下：
.container-main {
position: relative;
display: block;
justify-content: center;
width: auto;
padding: 2em;
max-width: 80rem;
background-color: hsl(216, 50%, 16%);
border-radius: 0.9375rem;
}
.nft {
width: 100%;
height: auto;
max-width: 21.875rem;
max-height: 21.875rem;
border-radius: 0.625rem;
}
.overlay {
position: absolute;
top: 0; /* 添加 top: 0 */
left: 0; /* 添加 left: 0 */
height: 100%;
width: 100%;
max-width: 21.875rem;
max-height: 21.875rem;
border-radius: 0.625rem;
opacity: 0;
transition: .3s ease;
background-color: hsl(178, 100%, 50%, .4);
}解决方案二：引入额外的容器元素
如果.container-main包含的内容不仅仅是图像和覆盖层，那么直接修改.container-main的定位可能会影响其他元素的布局。在这种情况下，可以引入一个额外的容器元素来包裹图像和覆盖层。
修改后的HTML结构如下：
<div class="container-main">
<div class="nft-container">
<img class="nft" src="./images/GC.png" alt="nft" />
<div class="overlay">
<a href="#" class="icon" title="view"></a>
<i class="fa-solid fa-eye"></i>
</div>
</div>
</div>对应的CSS样式如下：
.container-nft {
position: relative;
width: 100%;
height: auto;
max-width: 21.875rem;
max-height: 21.875rem;
border-radius: 0.625rem;
}
.nft {
width: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
max-width: 21.875rem;
max-height: 21.875rem;
border-radius: 0.625rem;
opacity: 0;
transition: .3s ease;
background-color: hsl(178, 100%, 50%, .4);
}在这个方案中，.nft-container被设置为position: relative，.overlay相对于.nft-container进行绝对定位。
总结
要使CSS绝对定位的覆盖层正确显示在图像之上，需要确保以下几点：
- 覆盖层的父容器（或最近的祖先容器）被设置为position: relative。
- 覆盖层具有明确的top、left、right或bottom属性，以确定其定位。
- 如果父容器包含的内容较多，可以考虑引入额外的容器元素来控制定位，避免影响其他元素的布局。
通过以上方法，可以有效地解决CSS绝对定位覆盖层无法正确显示的问题，实现预期的布局效果。
