使用绝对定位和相对定位实现图片叠加效果-html教程-PHP中文网

使用绝对定位和相对定位实现图片叠加效果

花韻仙語

发布： 2025-11-18 11:05:23

原创

567人浏览过

使用绝对定位和相对定位实现图片叠加效果

本文旨在解决在使用 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%);
}

登录后复制

关键点：