本文旨在解决在使用 CSS 绝对定位和相对定位时，叠加层无法正确覆盖在图片上的问题。通过分析 HTML 结构和 CSS 样式，我们将提供两种解决方案：一是将相对定位应用于包含图片和叠加层的父容器；二是创建新的父容器包裹图片，并应用相对定位。同时，强调了 top、left、right 或 bottom 属性对于绝对定位元素的重要性。
在使用 CSS 绝对定位和相对定位创建图片叠加效果时，经常会遇到叠加层（overlay）无法正确覆盖在图片之上的问题。这通常是因为对父元素和子元素的定位理解不够透彻。以下将详细讲解如何正确实现这种效果。
理解相对定位和绝对定位
- 相对定位（position: relative）： 元素相对于其正常位置进行定位。即使设置了 top、right、bottom 和 left 属性，元素仍然占据其原始空间。
- 绝对定位（position: absolute）： 元素相对于最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是 <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">
<i class="fa-solid fa-eye"></i>
</a>
</div>
</div>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, left, right, bottom 中的至少一个 */
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: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;
}
.fa-solid.fa-eye:hover {
color: hsl(178, 100%, 50%);
}关键点：
- .container-main 设置为 position: relative，作为绝对定位元素的参考。
- .overlay 设置为 position: absolute，并使用 top: 0 和 left: 0 将其定位在父容器的左上角。
- 需要明确设置 top、left、right 或 bottom 属性，以确定绝对定位元素的位置。
解决方案二：创建新的父容器
如果 .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">
<i class="fa-solid fa-eye"></i>
</a>
</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);
}
.container-nft: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;
}
.fa-solid.fa-eye:hover {
color: hsl(178, 100%, 50%);
}关键点：
- .container-nft 设置为 position: relative，作为绝对定位元素的参考。
- .overlay 设置为 position: absolute，并使用 top: 0 和 left: 0 将其定位在父容器的左上角。
注意事项
- 务必确保绝对定位元素的父容器具有 position: relative、position: absolute 或 position: fixed 属性。
- 绝对定位元素需要明确指定 top、left、right 或 bottom 属性，否则可能无法正确显示。
- 使用开发者工具检查元素定位，可以帮助快速定位问题。
总结
通过正确理解和应用 CSS 相对定位和绝对定位，可以轻松实现图片叠加效果。关键在于将相对定位应用于包含图片和叠加层的父容器，并确保绝对定位元素具有明确的位置属性。在复杂的布局中，创建新的父容器可以更好地组织和控制元素的位置。
