Rellax.js视差效果重叠及Bootstrap页面文本无法居中问题求解

前置修正 #

你现有HTML里存在结构错误，body末尾的</div>和</template>是无效残留标签，直接删除，避免DOM解析异常导致的布局问题。

问题1：着陆页文本偏移至页面底部无法居中 #

原因 #

Hero区域的背景元素和文本元素同属普通文档流，Rellax.js给背景图片添加定位属性后，图片本身占据的高度会把文本容器挤到区域底部。

修复步骤 #

给对应元素添加以下CSS样式：

/* 给hero设置固定视口高度，作为定位上下文 */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* 背景层脱离文档流，铺满hero不占高度 */
#bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 先给包裹文本的col-sm-2容器加自定义类名content-wrap，添加以下样式 */
.content-wrap {
  position: relative;
  z-index: 10;
  margin: 0 auto;
  width: 90%;
  max-width: 600px;
  text-align: center;
}

问题2：Rellax.js导致元素重叠、滚动时背景溢出 #

原因 #

1. 重复声明rellax变量导致配置冲突，且未限制视差元素的滚动范围，滚动时元素会超出hero区域和下方内容重叠
2. girl元素的行内固定top: -195px在不同屏幕尺寸下错位严重

修复步骤 #

1. 替换原有Rellax初始化代码，统一管理视差元素：

// 删掉原有两行rellax初始化代码，替换为以下内容
let rellax = null;
if (window.innerWidth > 768) { // 移动端默认关闭视差，避免性能问题
  // 先给所有要加视差的bg、girl元素加统一类名rellax-el
  rellax = new Rellax('.rellax-el', {
    center: true,
    wrapper: '#hero', // 限制视差滚动仅在hero范围内生效
  });
}

2. 删掉girl元素的行内top: -195px样式，替换为CSS自适应定位：

.bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.girl {
  position: absolute;
  bottom: 0;
  right: 10%;
  max-height: 90vh;
  width: auto;
}

3. 删掉footer标签上的data-rellax相关属性，footer不属于hero视差区域，添加视差属性会导致乱跑错位。

移动端适配建议 #

• 全局添加图片通用样式，防止图片溢出屏幕：

img {
  max-width: 100%;
  height: auto;
}

• 文字大小用clamp动态适配不同屏幕宽度，不需要写多套媒体查询：

#hero h1 {
  font-size: clamp(2rem, 8vw, 5rem);
}
#hero h2 {
  font-size: clamp(1.2rem, 4vw, 2.5rem);
}

• 你同时引入了Bootstrap4、Bootstrap5、Bulma三个样式框架，存在大量样式冲突，建议只保留一个你熟悉的框架，避免莫名布局问题。

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