如何用Bootstrap实现图片叠放文字上方及X轴点击视差效果

一、修复图片定位，实现文字上方覆盖 #

定位失效的核心原因几乎都是缺少相对定位的父容器，以及未设置正确的层级：

• 给图片所在的父容器添加 position: relative，让图片的绝对定位以父容器为参考基准，而非整个文档
• 给树木图片设置 position: absolute，通过 top/left/right/bottom 调整到目标位置，同时设置 z-index: 10（数值只要大于文字内容的默认z-index（0）即可），确保图片压在文字上方
• 注意：如果父容器有 overflow: hidden，会裁剪超出的图片，可根据需求调整该属性

二、实现点击X轴平移视差（避免margin影响） #

完全不用margin，用transform: translateX()是最优解——它不会触发页面重排，性能更好，且完全不影响其他元素布局：

• 给图片添加过渡动画，让平移更平滑
• 通过点击事件动态修改transform的值，用类切换的方式更易维护

修改后的代码示例 #

HTML

<div class="text-wrapper">
  <p>这里是需要被树木覆盖的文字内容，示例文本示例文本示例文本示例文本示例文本示例文本</p>
  <img src="tree.png" alt="树木" class="tree-img">
</div>
<button class="shift-trigger">点击平移树木</button>

CSS

.text-wrapper {
  position: relative; /* 关键：为图片提供定位参考 */
  width: 80%;
  margin: 0 auto;
  padding: 4rem 2rem;
  /* 其他文字样式 */
}

.tree-img {
  position: absolute;
  top: 0;
  left: 20%;
  z-index: 10; /* 确保在文字上方 */
  transition: transform 0.4s ease; /* 平滑过渡 */
}

/* 平移状态的类 */
.tree-img.shifted {
  transform: translateX(50px); /* 向右平移50px，可自定义距离 */
}

JavaScript

const tree = document.querySelector('.tree-img');
const btn = document.querySelector('.shift-trigger');

btn.addEventListener('click', () => {
  tree.classList.toggle('shifted');
});

关键说明 #

1. 没有position: relative的父容器，绝对定位的元素会相对于body定位，这就是你觉得“定位完全失效”的核心原因
2. transform: translateX()不会改变元素的布局空间，完全不会影响文字或其他元素的排版，完美适配你的视差需求
3. 用类切换控制平移状态，比直接修改style更易维护，也方便扩展其他交互

内容的提问来源于stack exchange，提问作者Sara Abo Shousha