如何实现文本及标题置于图片上方（避免被图片遮挡）

问题根源 #

1. 图片使用position: absolute脱离文档流，会覆盖正常流中的文本
2. 文本存在重复id（HTML中id必须唯一），且margin-left: 40vh导致无法正确居中，display: inline也不利于块级文本的居中布局

修改方案 #

1. 调整HTML结构：将文本容器移到图片标签之前，确保逻辑上的上下顺序
2. 修复CSS样式：
   • 给文本容器设置全局居中，移除不合理的外边距
   • 通过z-index层级控制，让文本显示在图片上方
   • 把重复的id="starting-info"替换为class="starting-info"，符合HTML规范
   • 调整文本的显示方式，让块级元素正常居中

修改后的完整代码 #

/* 文本容器样式 */
.correa-events-info {
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  color: black;
  /* 设置相对定位+层级，确保文本在图片上方 */
  position: relative;
  z-index: 1;
  margin-top: 20px; /* 可选：给文本添加顶部间距 */
}

.starting-info {
  margin: 10px 0; /* 调整标题之间的间距 */
}

/* 图片样式 */
#eventcenterimg {
  display: block;
  margin: 0 auto; /* 图片自身居中，避免绝对定位脱离文档流遮挡文本 */
  width: 30%;
  background-repeat: no-repeat;
  /* 若必须保留绝对定位，启用以下代码并设置层级 */
  /*
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  */
}

.socialmedia {
  text-align: center;
  margin-top: 10px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&display=swap" rel="stylesheet">

<!-- 文本容器移至图片前方 -->
<div class="correa-events-info">
  <h4 class="starting-info">Book and experience any special events at Correa Events Center.</h4>
  <h4 class="starting-info">Call to book at:</h4>
</div>

<img src="img/correaevent.png" height="970" alt="Correa Events Center" id="eventcenterimg">

<div class="socialmedia">
  <a href="https://www.facebook.com/people/Correas-Event-Center/100077040368594/" target="_blank"><i class="fab fa-facebook-f"></i></a>
</div>

额外说明 #

• 若不需要图片绝对定位，用margin: 0 auto让图片居中更稳妥，不会干扰文本的正常布局
• 若必须保留图片的绝对定位，一定要给图片设置z-index: -1，同时给文本容器添加position: relative和z-index: 1，确保文本层级高于图片

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