实现类Google Docs侧边批注：同Y轴定位且可堆叠不重叠

开发者阿泽

2026-6-19

实现Google Docs式侧边批注（无重叠+支持用户信息）

现有方案的问题

你当前用span::before生成批注的方式，有两个无法解决的硬伤：

所有批注强制固定位置，完全不考虑彼此的高度，必然重叠
伪元素只能插入纯文本，没法添加头像、用户名这类复杂UI元素

优化解决方案

我们可以通过独立批注容器+JS动态计算位置的方式解决这两个问题，具体实现如下：

1. 重构HTML结构

把批注从伪元素改成独立的DOM容器，绑定对应高亮文本的ID，同时支持添加头像、用户名：

<html>
<head>
  <style>
    /* 后面的CSS代码放这里 */
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis metus sit amet purus dapibus iaculis. Aenean facilisis malesuada orci, tincidunt bibendum erat. <span class="highlight" id="c1">Proin vel nisl lacinia, facilisis velit cursus, eleifend turpis. Phasellus ac imperdiet erat.</span> Donec egestas aliquam augue a mattis. <span class="highlight" id="c2">Pellentesque congue nunc vel scelerisque eleifend.</span> Fusce orci odio, ultricies posuere mi ac, elementum blandit dolor. Praesent non velit bibendum est feugiat egestas et nec urna. Etiam volutpat eu massa sed porttitor. Aliquam et pulvinar metus. Maecenas nec enim felis.</p>

      <p>Ut mattis eros vitae risus scelerisque ornare ac tincidunt nibh. Suspendisse vitae ipsum porttitor, interdum nisl ut, sagittis arcu. In pretium, nulla vitae tincidunt vestibulum, odio neque convallis lacus, sit amet auctor leo tortor non nunc. Curabitur in dui at lorem mollis malesuada eget eget velit. <span class="highlight" id="c3">Etiam vel neque vitae enim semper consequat</span> lacinia id urna. Nulla commodo tellus et nunc commodo, et vulputate nunc auctor. Curabitur nec gravida risus. Aliquam neque nulla, faucibus non ante sed, pharetra euismod purus. Pellentesque molestie ante in sapien varius facilisis. Fusce nec cursus diam.</p>

      <p>Ut ut viverra nisi. Integer imperdiet at nibh at bibendum. Etiam commodo, purus eget gravida faucibus, ipsum mi maximus magna, eu tincidunt arcu arcu nec elit. Quisque ligula nibh, imperdiet hendrerit laoreet et, rhoncus vitae libero. Ut ornare leo sed nisl eleifend pretium non nec arcu. Aenean quis sollicitudin arcu, ac fermentum sem. Proin vitae velit a est ornare vestibulum. Vivamus finibus dui aliquam, ultricies quam eget, egestas eros. Cras ut nunc ac nunc pharetra gravida. Morbi pulvinar blandit justo id interdum. Sed risus orci, posuere id semper tempor, dignissim non turpis.</p>
    </div>

    <div class="comments-sidebar">
      <!-- 批注1：绑定c1 -->
      <div class="comment" data-for="c1">
        <div class="comment-header">
          <img class="avatar" src="https://picsum.photos/32/32" alt="User Avatar">
          <span class="username">Alice</span>
        </div>
        <div class="comment-content">
          Etiam commodo, purus eget gravida faucibus, ipsum mi maximus magna, eu tincidunt arcu arcu nec elit
        </div>
      </div>

      <!-- 批注2：绑定c2 -->
      <div class="comment" data-for="c2">
        <div class="comment-header">
          <img class="avatar" src="https://picsum.photos/32/32?2" alt="User Avatar">
          <span class="username">Bob</span>
        </div>
        <div class="comment-content">
          Cras ut nunc ac nunc pharetra gravida. Morbi pulvinar blandit justo id interdum. Sed risus orci, posuere id semper tempor, dignissim non turpis.
        </div>
      </div>

      <!-- 批注3：绑定c3 -->
      <div class="comment" data-for="c3">
        <div class="comment-header">
          <img class="avatar" src="https://picsum.photos/32/32?3" alt="User Avatar">
          <span class="username">Charlie</span>
        </div>
        <div class="comment-content">
          Ut ut viverra nisi. Integer imperdiet at nibh at bibendum. Etiam commodo, purus eget gravida faucibus, ipsum mi maximus magna.
        </div>
      </div>
    </div>
  </div>

  <script>
    // 后面的JS代码放这里
  </script>
</body>
</html>

2. 设置CSS布局

分离内容区和批注栏，给批注添加基础样式，确保布局合理：

.container {
  display: flex;
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.content {
  max-width: 400px;
  padding-right: 240px; /* 给批注栏留空间 */
}

.highlight {
  background: yellow;
}

.comments-sidebar {
  position: absolute;
  left: 420px;
  top: 0;
  width: 200px;
}

.comment {
  position: absolute;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  width: 100%;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 6px;
}

.username {
  font-size: 12px;
  font-weight: bold;
  color: #333;
}

.comment-content {
  font-size: 14px;
  color: #555;
  line-height: 1.4;
}

3. JS动态计算位置与堆叠

通过JS获取每个高亮文本的位置，调整批注的top值，确保对齐且不重叠：

function positionComments() {
  const comments = document.querySelectorAll('.comment');
  let lastBottom = 0; // 记录上一个批注的底部位置

  comments.forEach(comment => {
    const targetId = comment.dataset.for;
    const targetElement = document.getElementById(targetId);
    if (!targetElement) return;

    // 获取高亮文本相对于容器的顶部偏移
    const targetTop = targetElement.getBoundingClientRect().top - document.querySelector('.container').getBoundingClientRect().top;
    
    // 计算当前批注的初始top值
    let commentTop = targetTop;
    
    // 如果当前批注和上一个重叠，调整top值
    if (commentTop < lastBottom) {
      commentTop = lastBottom + 8; // 8px是批注间距
    }

    // 设置批注位置
    comment.style.top = `${commentTop}px`;
    
    // 更新上一个批注的底部位置
    lastBottom = commentTop + comment.offsetHeight;
  });
}

// 页面加载时执行，窗口大小变化时重新计算
window.addEventListener('load', positionComments);
window.addEventListener('resize', positionComments);

核心优势

自动堆叠：通过JS跟踪上一个批注的底部位置，动态调整当前批注的top值，彻底避免重叠
支持复杂UI：批注是独立DOM容器，可以自由添加头像、用户名、时间甚至回复按钮
精准对齐：基于高亮文本的实际位置计算，保证批注和文本Y轴完全对齐

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