嵌套元素z-index逻辑咨询：调整HTML嵌套后overlay层级异常原因

问题场景 #

原本实现了图片hover显示overlay的功能：a标签（通过伪元素做overlay）和img同级时，hover效果正常；但把img嵌套进a标签后，overlay的opacity虽正常变化，却被img完全遮挡，CSS和z-index属性未做任何修改。

核心原因：堆叠上下文变化+替换元素的特殊堆叠规则 #

1. 原结构的正常逻辑 #

原DOM结构中，a标签（.image__link）和img是同级元素，共同处于.image（相对定位）形成的堆叠上下文里：

• .image__link是绝对定位且设置了z-index:1，属于堆叠上下文里的「正z-index定位元素」，堆叠层级远高于静态定位的img（非定位替换元素）。
• 它的::after伪元素继承了这个堆叠层级优势，自然能覆盖在img上方。

2. 修改后结构的异常逻辑 #

当img被嵌套进a标签后，两者的堆叠上下文归属发生变化：

• img成为a标签的子元素，进入a标签（绝对定位）形成的独立堆叠上下文。
• 根据CSS堆叠顺序的规范，非定位的替换元素（比如img）的堆叠层级，要高于z-index:auto的定位元素（这里的::after伪元素未设置z-index，默认auto）。
• 所以即使伪元素的opacity正常切换，也会被img遮挡，无法显示在视觉上层。

快速修复方案 #

• 给.image__link::after添加z-index:1，让它成为正z-index的定位元素，堆叠层级超过img；
• 或者给img设置position: relative; z-index: -1，降低它的堆叠层级，让伪元素能显示出来。

内容的提问来源于stack exchange，提问作者Maarten -Monica for president