求助：实现红色文本跟踪蓝色文本位置（含浏览器Resize适配）

要实现红色文本精准对齐蓝色文本且窗口 resize 时保持定位，你需要调整 CSS 定位逻辑，并添加窗口 resize 时的重新计算逻辑，具体修改如下：

关键修正点 #

• 把 .red-text 的定位从 relative 改为 absolute，因为它的父容器 .absolute 已经是绝对定位，这样红色文本会相对于父容器定位
• 计算偏移时，基于父容器 .wrap 的视口位置，将目标元素的坐标转换为相对于 .absolute 容器的偏移值
• 添加窗口 resize 事件监听，每次窗口变化时重新计算定位

完整代码 #

HTML（无需修改） #

<div class="container">
  <div class="wrap">
    <p>Maecenas a finibus sapien. Duis pulvinar ligula vel arcu cursus, in euismod nunc iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce facilisis quis libero nec bibendum. Donec suscipit eros sit amet ex condimentum ullamcorper. Aliquam dictum, risus id pharetra congue, nisl nisi facilisis enim, sit amet facilisis nunc diam condimentum eros. Aenean euismod turpis id enim commodo sagittis. <span class="aliquam-span">Aliquam</span> eget dolor eget nulla tempus imperdiet. Praesent gravida, nisl quis malesuada faucibus, orci purus ultrices velit, ut porttitor libero ante at nisl. Duis eget convallis risus. Nunc vitae orci non tellus ultricies vestibulum in a augue. Vestibulum hendrerit leo ac nunc rutrum imperdiet. Integer sem tellus, maximus vel interdum ut, accumsan vel orci. Mauris maximus leo vitae felis dapibus euismod. Nulla facilisi. Donec ac ullamcorper justo.</p>
    <div class="absolute">
      <p class="red-text">Aliquam</p>
    </div>
  </div>
</div>

CSS 修改 #

.container {
  width: 100%;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}

p {
  font-size: 1.5rem;
  /* 确保两个文本的行高一致，避免垂直偏移 */
  line-height: 1.5;
}

.wrap {
  position: relative;
}

.absolute {
  position: absolute;
  inset: 0; 
  pointer-events: none; /* 可选：让红色文本不遮挡下方的蓝色文本交互 */
}

.red-text {
  position: absolute; /* 改为绝对定位 */
  color: red;
  margin: 0; /* 去掉默认p标签的margin，避免偏移 */
}

.aliquam-span {
  color: blue;
}

JS 修改 #

const aliquam = document.querySelector('.aliquam-span');
const aliquamAbsolute = document.querySelector('.red-text');
const wrap = document.querySelector('.wrap');

// 定义定位函数
function positionRedText() {
  const aliquamRect = aliquam.getBoundingClientRect();
  const wrapRect = wrap.getBoundingClientRect();
  
  // 计算相对于.wrap（即.absolute容器）的偏移
  const leftOffset = aliquamRect.left - wrapRect.left;
  const topOffset = aliquamRect.top - wrapRect.top;
  
  aliquamAbsolute.style.left = `${leftOffset}px`;
  aliquamAbsolute.style.top = `${topOffset}px`;
}

// 初始定位
positionRedText();

// 窗口resize时重新定位
window.addEventListener('resize', positionRedText);

逻辑解释 #

1. CSS 调整：.red-text 改为绝对定位后，会相对于父容器 .absolute 定位，而 .absolute 是相对于 .wrap 的，这样偏移计算更准确。同时设置一致的行高、去掉默认 margin，避免文本本身的布局差异导致偏移。
2. JS 逻辑：通过 getBoundingClientRect() 获取目标元素和父容器的视口坐标，计算差值得到相对于父容器的偏移，不管窗口怎么变化，只要重新计算就能保持对齐。
3. Resize 监听：窗口大小变化时，文本的位置可能会改变，重新调用定位函数就能确保对齐关系不变。

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