absolute/relative定位下图片覆盖层无法置于图片上方的问题

核心问题分析 #

• 你把position: relative加在了<img>元素上，但覆盖层.overlay是.container-main的直接子元素，所以**.container-main才需要设置position: relative**，这样.overlay的绝对定位才会相对于这个容器生效。
• 图片元素默认的堆叠层级会高于未指定z-index的绝对定位元素，需要给覆盖层添加z-index确保它在图片上方。

具体修复步骤 #

1. 修正父元素的定位设置 #

修改.container-main的CSS，添加position: relative，同时移除.nft上的position: relative（它不需要这个设置）：

.container-main {
    display: block;
    justify-content: center;
    width: auto;
    padding: 2em;
    max-width: 80rem;
    background-color: hsl(216, 50%, 16%);
    border-radius: 0.9375rem;
    position: relative; /* 新增这一行 */
}

.nft {
    /* 移除 position: relative; */
    width: 100%;
    height: auto;
    max-width: 21.875rem;
    max-height: 21.875rem;
    border-radius: 0.625rem;
}

2. 给覆盖层添加z-index确保层级 #

在.overlay的CSS中添加z-index: 1，保证它在图片上方：

.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);
    z-index: 1; /* 新增这一行 */
    top: 0; /* 确保覆盖层从容器顶部开始 */
    left: 0; /* 确保覆盖层从容器左侧开始 */
}

3. 修正HTML结构和CSS选择器 #

• HTML中把<i>标签放到<a>标签内部，确保图标在覆盖层的正确位置：

<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>

• 修正图标的hover选择器（类名之间需要用.连接）：

.fa-solid.fa-eye:hover {
  color: hsl(178, 100%, 50%);
}

内容的提问来源于stack exchange，提问作者Jacwilalasey