如何在SimpleParallax.js视差图片内正确定位副标题文本？

核心问题 #

你给视差图片加了position:relative，但绝对定位的h2是按最近的非static定位父元素来定位的——包裹图片和h2的外层div默认是position:static，所以h2会相对于整个页面定位，才会跑到顶部。

修复步骤 #

1. 给包裹图片和h2的外层div加类名（比如parallax-container），设置position:relative，让h2以这个容器为定位基准：

<div class="parallax-container">       
    <img class="frame-2" src="https://cdn.glitch.global/7cebc84e-df9c-45e9-95c1-516a7a17465b/Frame-2.jpg?v=1675454173228">
    <h2 class="subhead-text">Roll Out: our portable party can go wherever you go</h2>
</div>

2. 修改CSS样式，实现左中对齐：

/* 新增容器样式 */
.parallax-container {
  position: relative;
  width: 100%; /* 确保容器和图片同宽 */
}

/* 修改h2样式 */
.subhead-text {
  color: #f3f3f3;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  font-style: italic; 
  position: absolute;
  top: 50%; /* 垂直方向居中 */
  left: 5%; /* 水平左对齐，可按需调整距离 */
  transform: translateY(-50%); /* 抵消自身高度一半，实现精准垂直居中 */
  background-color: #f41230bd; /* 可选：加背景色提升文字可读性 */
  padding: 5px 10px;
}

/* 移除图片的position:relative，不需要给图片设置定位 */
.frame-2 {
  width: 100%; /* 确保图片占满容器宽度 */
}

额外说明 #

• SimpleParallax.js不会干扰这个定位逻辑，只要父容器是relative，h2就会始终在图片上方保持左中对齐。
• 可以调整left值（比如10%）控制文字和左侧的距离，调整padding优化文字留白。

内容的提问来源于stack exchange，提问作者elijah.messmer