本文讲解如何通过纯 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 的父级）。而你的
✅ 正确解法：交由 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 后，必须将其插入到对应
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 三要素组合，即可实现稳定、轻量、可维护的悬浮提示效果，彻底规避滚动偏移陷阱。
