求助：滚动容器内绝对定位div未随滚动正确定位问题

问题核心 #

你遇到的本质问题是：绝对定位元素是相对于最近的定位祖先（relative/absolute/fixed/sticky）的初始位置定位的，当TOC容器滚动时，定位基准不会跟随列表项的视口位置变化，导致展开的文本和当前hover的列表项错位。

可行解决方案（CSS+轻量JS） #

这个方案能让展开文本精准跟随滚动后的列表项位置，同时支持自定义样式和显示时机：

1. DOM结构

<div class="toc-container">
  <ul class="toc-list">
    <li class="toc-item">
      <span class="truncated-text">这是一段超长的目录项文本，默认会被截断显示</span>
      <span class="full-text">这是一段超长的目录项文本，默认会被截断显示，鼠标悬停时展示完整内容</span>
    </li>
    <!-- 更多列表项 -->
  </ul>
</div>

2. CSS样式

/* TOC容器：固定侧边，独立滚动 */
.toc-container {
  position: sticky;
  top: 0;
  left: 0;
  width: 220px;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid #e5e7eb;
  background: #fff;
}

.toc-list {
  list-style: none;
  padding: 12px 0;
  margin: 0;
}

/* 列表项：默认截断文本 */
.toc-item {
  position: relative;
  padding: 8px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background 0.2s ease;
}

.toc-item:hover {
  background: #f3f4f6;
}

/* 展开文本：默认隐藏，hover时显示 */
.full-text {
  display: none;
  position: fixed; /* 相对于视口定位，避免滚动错位 */
  top: 0;
  left: 0;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  white-space: nowrap;
  z-index: 100;
}

.toc-item:hover .full-text {
  display: block;
}

3. JS动态计算位置

const tocItems = document.querySelectorAll('.toc-item');

tocItems.forEach(item => {
  const fullText = item.querySelector('.full-text');
  
  item.addEventListener('mouseenter', () => {
    // 获取列表项在视口中的位置
    const rect = item.getBoundingClientRect();
    // 让展开文本和列表项顶部对齐，左侧紧贴TOC容器
    fullText.style.top = `${rect.top}px`;
    fullText.style.left = `${rect.right}px`;
  });
});

方案原理 #

• 用position: fixed让展开文本脱离容器的滚动上下文，直接相对于视口定位
• 通过getBoundingClientRect()实时获取列表项的视口坐标，动态调整展开文本的位置，确保滚动后依然对齐
• 保留了TOC容器的独立滚动和始终可见特性，同时支持完全自定义展开文本的样式

替代优化（无JS，但局限性大） #

如果不想用JS，仅当TOC容器高度固定且不需要滚动时，可以将容器设为position: fixed，列表项设为position: relative，展开文本用position: absolute。但这种方式无法解决容器滚动时的错位问题，仅适合短目录场景。

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