z-index设置未达预期：需实现链接>底层图片>链接内图片的层级优先级

哎，我太懂这种z-index设置了却完全没反应的崩溃感！你遇到的问题核心很简单——z-index只对**设置了position属性（除默认static外）**的元素生效，你代码里的.link a和.link img都是默认的static定位，所以你设的z-index根本不会起作用。

先贴一下你的原代码（补全了截断部分）：

img{ border:1px solid #000; } 
.frame{ position: absolute; top:0; z-index:8; } 
.link a{ z-index: 9; } 
.link img{ z-index:7; } 

<div class="container"> 
  <div class="link"> 
    <a href="#"> 
      <img src="http://via.placeholder.com/350x150"> 
    </a> 
  </div> 
  <div class="frame"> 
    <img src="http://via.placeholder.com/400x200">
  </div>
</div>

修改后的解决方案代码 #

img { border: 1px solid #000; }
/* 上层的frame图片，保持绝对定位和z-index:8 */
.frame { position: absolute; top: 0; z-index: 8; }
/* 给链接设置relative定位，让z-index生效，设为最高层级9 */
.link a { 
  position: relative; 
  z-index: 9; 
  /* 可选：设为inline-block确保点击区域完全覆盖图片 */
  display: inline-block; 
}
/* 链接内的图片设置relative定位，z-index设为7（低于链接） */
.link img { 
  position: relative; 
  z-index: 7; 
}
/* 给容器加relative定位，让frame的绝对定位相对于它，避免布局乱跑 */
.container { position: relative; }

关键逻辑说明 #

1. z-index生效的核心前提：必须给元素设置position: relative/absolute/fixed/sticky，static定位的元素z-index完全无效，这是你之前设置没效果的根本原因。
2. 层级优先级落地：
   • 链接(.link a)设为最高z-index:9，确保它的点击区域优先响应，哪怕被frame的图片覆盖
   • 链接内的img设为z-index:7，低于链接本身，满足你要的「链接>链接内图片」的层级要求
   • frame的图片保持z-index:8，低于链接，所以不会挡住链接的点击
3. 额外布局优化：给.container加position: relative，让.frame的绝对定位相对于容器，而不是整个页面，避免元素乱跑。

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