鼠标悬停时文本后方显示图片（z-index）：问题排查求助

咱们一步步拆解问题所在，帮你搞定这个悬停效果： #

1. HTML嵌套结构违规，导致选择器失效

你在<h2 class="two">里嵌套了另一个<h2>标签，这是不符合HTML规范的——标题元素（h1-h6）不能互相嵌套。浏览器会自动修正这个错误，把内部的<h2>ALBERT DALTON</h2>单独拆出来，结果就是你的<img>根本不在目标<h2 class="two">的子元素范围内。这直接导致h2.two:hover img这个选择器完全匹配不到图片，自然不会触发任何样式变化。

2. z-index生效的前提条件没满足

z-index属性只对**设置了position属性（值为relative/absolute/fixed/sticky）**的元素生效。你当前的.artisthover没有设置position，所以无论你给它设多少z-index值，都是无效的。另外，就算你设置了display:block，默认流布局下图片会独占一行，根本做不到“显示在文本后方”的效果。

修复后的完整代码示例 #

第一步：修正HTML结构

把嵌套的h2去掉，让文本直接作为h2的内容，img作为h2的子元素：

<h2 class="two">
  ALBERT DALTON
  <img src="http://lawnyavawnya.com/2018/wp-content/uploads/2018/04/Weary_Thumb.jpg" class="artisthover">
</h2>

第二步：调整CSS样式

/* 初始隐藏图片，设置绝对定位脱离文档流 */
.artisthover {
  display: none;
  position: absolute;
  z-index: -1; /* 让图片处于文本后方 */
  left: 0;
  top: 0;
  /* 如果图片尺寸过大，可以添加宽高适配 */
  /* width: 100%;
  height: auto; */
}

/* 给父元素h2设置相对定位，让图片以它为基准定位 */
h2.two {
  position: relative;
  /* 可选：设置内边距避免图片完全覆盖文本，根据需求调整 */
  /* padding-right: 120px; */
}

/* 鼠标悬停时显示图片 */
h2.two:hover .artisthover {
  display: block;
}

关键逻辑说明： #

• 给h2.two设置position:relative：一方面创建专属的堆叠上下文，另一方面让内部的绝对定位图片以这个h2为参考点定位，避免图片乱跑。
• 给图片设置position:absolute：脱离文档流，不再占据页面空间，同时满足z-index的生效条件。
• z-index: -1：因为图片是h2的子元素，且h2创建了堆叠上下文，z-index:-1会让图片处于h2文本的下方，完美实现“悬停时图片显示在文本后方”的需求。

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