本文讲解如何通过纯 css 方案替代 javascript 手动计算位置的方式，解决动态创建的“more info”弹窗在父容器滚动时顶部偏移、覆盖宿主元素的问题，核心在于正确设置 `position: relative` 与 `absolute` 的层级关系及 `z-index`。

你遇到的问题——Tooltip 初始位置正确，但一旦父

开始滚动（即 scrollTop !== 0），弹窗就突然上移并遮挡任务项——根本原因在于 CSS 定位上下文缺失，而非 JavaScript 计算逻辑错误。

在你的原始代码中，你为 tooltipElement 设置了 position: absolute，并手动计算 top 和 left 值：

tooltipElement.style.position = 'absolute';
tooltipElement.style.left = x + 'px';
tooltipElement.style.top = y + 'px';

但 absolute 定位的参照物是最近的已定位祖先元素（即 position 为 relative、absolute、fixed 或 sticky 的父级）。而你的

• 默认是 position: static（不可作为定位上下文），导致浏览器回退到 或视口作为参考，此时 top 值不再随父容器滚动而自适应，于是出现“跳变”。

  ✅ 正确解法：交由 CSS 处理定位逻辑，彻底移除 JS 中的位置硬编码

  首先，在 CSS 中明确建立定位上下文：

  /* 让每个任务项成为绝对定位元素的容器 */
  li.card {
    position: relative; /* 关键！提供定位上下文 */
  }
  
  /* 弹窗本身使用绝对定位，相对于 li.card 定位 */
  div.card {
    position: absolute;
    top: calc(100% + 10px); /* 紧贴宿主元素下方，留 10px 间距 */
    left: 20px;             /* 水平偏移 20px */
    z-index: 1000;          /* 确保显示在其他列表项之上，避免被遮挡 */
    max-width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  其次，在 JavaScript 中创建 tooltip 后，必须将其插入到对应

• 内部
（而非追加到 body 或其他位置）：

createTooltip() {
  const tooltipElement = document.createElement('div');
  tooltipElement.className = 'card'; // 注意：此处 class 名与 li.card 冲突，建议改用更语义化类名如 'tooltip-card'

  const toolTipTemplate = document.getElementById('tooltip');
  const tooltipBody = document.importNode(toolTipTemplate.content, true);
  tooltipBody.querySelector('p').textContent = this.text;
  tooltipElement.append(tooltipBody);

  // ✅ 关键：插入到宿主 li 元素内部，而非 body
  this.hostElement.appendChild(tooltipElement);

  // ❌ 移除以下三行（完全不需要 JS 控制位置）
  // tooltipElement.style.position = 'absolute';
  // tooltipElement.style.left = x + 'px';
  // tooltipElement.style.top = y + 'px';

  // ✅ 移除 scroll 监听与手动 y 坐标更新逻辑（全部废弃）
  // const yLogger = () => { ... };
  // this.hostElement.closest('ul').addEventListener('scroll', yLogger);

  tooltipElement.addEventListener('click', this.closeToolTip.bind(this));
  this.element = tooltipElement;
}

⚠️ 注意事项：

• 若 tooltipElement 与宿主
• 共用 class="card"，可能触发样式冲突（例如圆角、阴影重复叠加），建议为弹窗单独定义类名，如 class="task-tooltip"，并在 CSS 中单独声明其样式。
• z-index 必须显式设置且足够高（如 1000），否则当列表项堆叠时，新弹窗可能被后续
• 遮盖。
• top: calc(100% + 10px) 是推荐写法，它表示“从宿主元素底部起算 +10px”，比固定像素值更健壮，能适配不同高度的任务项。
• 不再需要监听 scroll 事件或维护 scrollTop 差值数组——因为 absolute 元素在 relative 父容器内天然跟随滚动（其定位基准是父容器内容区，而非视口）。

总结：定位问题优先交由 CSS 解决，JS 聚焦于行为逻辑（创建、销毁、交互）。通过 position: relative + position: absolute + z-index 三要素组合，即可实现稳定、轻量、可维护的悬浮提示效果，彻底规避滚动偏移陷阱。