首页 > 营销学院 > 技术知识

使用CSS实现图片覆盖层的正确显示

本文旨在解决在使用绝对定位和相对定位时，覆盖层无法正确覆盖在图片上的问题。通过分析HTML结构和CSS样式，我们将提供两种解决方案：一是将相对定位应用到包含图片和覆盖层的父容器上；二是创建一个新的容器包裹图片，并将相对定位应用于该容器。此外，我们还会强调`top`、`left`、`right`或`bottom`等定位属性的重要性，确保覆盖层能够完全覆盖目标图片。

在使用CSS进行布局时，经常会遇到需要将一个元素（例如覆盖层）放置在另一个元素之上的情况。绝对定位和相对定位是实现这种效果的常用方法。然而，如果使用不当，可能会导致覆盖层无法正确显示在目标元素之上，而是出现在下方或其他错误的位置。本文将深入探讨如何正确使用绝对定位和相对定位，以确保覆盖层能够完美地覆盖在图片之上。

理解相对定位和绝对定位

在深入解决方案之前，让我们先回顾一下相对定位和绝对定位的概念。

相对定位（position: relative;）： 元素相对于其正常位置进行定位。设置top、right、bottom和left属性会使元素偏离其正常位置。重要的是，相对定位不会影响其他元素的位置。
绝对定位（position: absolute;）： 元素相对于最近的已定位祖先元素进行定位（即position属性值为relative、absolute、fixed或sticky的祖先元素）。如果没有已定位的祖先元素，那么它相对于初始包含块（通常是html>元素）进行定位。绝对定位会使元素脱离文档流，这意味着其他元素会忽略它的存在。

解决方案一：将相对定位应用于父容器

最常见的错误是将相对定位应用于图片本身，而不是包含图片和覆盖层的父容器。要解决这个问题，需要将position: relative;应用于包含图片和覆盖层的父容器。

HTML结构：

  @@##@@

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; /* 关键：指定覆盖层的位置 */
    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 现在是相对定位的容器，这意味着.overlay将相对于它进行绝对定位。
.overlay 使用 position: absolute; 脱离文档流，并且通过 top: 0; 和 left: 0; 定位到 .container-main 的左上角，从而覆盖整个图片区域。
重要： 必须为 .overlay 指定 top、right、bottom 或 left 属性中的至少一个，否则覆盖层可能不会显示在正确的位置。

解决方案二：创建新的容器包裹图片

如果 .container-main 包含的内容不仅仅是图片和覆盖层，那么将相对定位应用于它可能会影响其他元素的布局。在这种情况下，可以创建一个新的容器来包裹图片和覆盖层。

HTML结构：

    
        @@##@@

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);
}

说明：