如何在指定文字下方叠放图片而非背景（CSS/HTML实现）

核心问题是层级堆叠顺序，直接通过z-index属性就能解决，配合定位上下文的设置，就能实现文字在图片上方的效果，类似Google Sites的标题装饰样式。

完整代码示例 #

HTML结构

<div class="title-wrapper">
  <img src="your-decoration-image.png" alt="标题装饰图" class="title-decoration">
  <h2 class="page-title">这是我的页面标题</h2>
</div>

CSS样式

/* 父容器作为定位上下文，避免子元素相对于整个文档定位 */
.title-wrapper {
  position: relative;
  width: fit-content;
  /* 可根据需求调整位置，比如居中 */
  margin: 2rem auto 0;
}

/* 装饰图片：绝对定位到标题下方区域 */
.title-decoration {
  position: absolute;
  bottom: -8px; /* 调整图片与文字的垂直间距 */
  left: 0;
  width: 100%; /* 图片宽度匹配标题宽度 */
  height: auto;
  z-index: 1; /* 设置较低层级，让文字在上方 */
}

/* 标题文字：设置更高层级确保不被遮挡 */
.page-title {
  position: relative;
  z-index: 2; /* 数值大于图片的z-index即可 */
  margin: 0;
  font-size: 2.5rem;
}

关键说明 #

1. 定位上下文：父容器设置position: relative，让内部绝对定位的图片和文字以这个容器为参考，避免位置偏移到页面其他地方。
2. 层级控制：z-index数值越大，元素堆叠层级越高。给文字设置比图片更大的z-index，就能确保文字始终在图片上方。
3. 位置调整：通过bottom、left等属性调整图片相对于文字的位置，比如让图片刚好在标题下方一点，模拟装饰效果。
4. 不需要纠结HTML元素顺序：只要z-index设置正确，不管图片在文字前面还是后面，都能实现文字在上的效果。

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