本文旨在解决在使用 CSS 绝对定位和相对定位时，叠加层无法正确覆盖在图片上的问题。通过分析 HTML 结构和 CSS 样式，我们将提供两种解决方案：一是将相对定位应用于包含图片和叠加层的父容器；二是创建新的父容器包裹图片，并应用相对定位。同时，强调了 top、left、right 或 bottom 属性对于绝对定位元素的重要性。

在使用 CSS 绝对定位和相对定位创建图片叠加效果时，经常会遇到叠加层（overlay）无法正确覆盖在图片之上的问题。这通常是因为对父元素和子元素的定位理解不够透彻。以下将详细讲解如何正确实现这种效果。

理解相对定位和绝对定位

• 相对定位（position: relative）： 元素相对于其正常位置进行定位。即使设置了 top、right、bottom 和 left 属性，元素仍然占据其原始空间。
• 绝对定位（position: absolute）： 元素相对于最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素，则相对于初始包含块（通常是 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; /* 必须指定 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 结构：

    
        @@##@@
        
            
              
            
        
    

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 相对定位和绝对定位，可以轻松实现图片叠加效果。关键在于将相对定位应用于包含图片和叠加层的父容器，并确保绝对定位元素具有明确的位置属性。在复杂的布局中，创建新的父容器可以更好地组织和控制元素的位置。