如何实现绝对定位的Tooltip覆盖可滚动容器？

这个问题我平时做组件的时候碰到过好多次——你现在的情况是，Tooltip作为滚动容器内元素的子元素用了绝对定位，但浏览器还是会把Tooltip的尺寸算进容器的滚动范围里，导致容器平白多出不必要的滚动空间。要让Tooltip直接盖在容器上又不影响滚动，核心就是把Tooltip从滚动容器的内容上下文里摘出来，给你两种实用的方案：

方案1：把Tooltip移到滚动容器外面（推荐） #

原理 #

把Tooltip从容器内部挪出来，让它相对于滚动容器（或者更上层的父元素）定位，这样它就不属于容器的滚动内容了，自然不会影响容器的滚动范围。之后我们可以用CSS或者JS把它精准定位到目标元素的位置。

修改后的代码 #

<div class="container">
  <div class="relative">
    <div class="txt"> blabla </div>
  </div>
</div>
<!-- 把Tooltip移到容器外面 -->
<div class="absolute"> tooooooltip </div>

.container {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  overflow: scroll;
  position: relative; /* 让Tooltip可以相对于容器定位 */
}

.relative {
  position: relative;
  margin: 20px 0; /* 给元素留点间距，方便看效果 */
}

.absolute {
  left: 40px; /* 根据目标元素的位置调整 */
  top: 10px;
  border: 3px solid pink;
  position: absolute;
  background: white; /* 加个背景，避免被容器内容挡住 */
  z-index: 10; /* 确保Tooltip在容器上方 */
}

方案2：用CSS contain 属性（不改动HTML结构） #

如果不想调整HTML布局，可以给滚动容器加个contain: layout paint属性，让浏览器限制容器的布局和绘制范围，不再把内部绝对定位元素的尺寸算进滚动范围：

.container {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  overflow: scroll;
  contain: layout paint; /* 这行是关键 */
}

.relative {
  position: relative;
}

.absolute {
  left: 20px;
  top: 0;
  border: 3px solid pink;
  position: absolute;
  background: white;
  z-index: 10;
}

为啥原来的代码会出问题？ #

你原来的代码里，Tooltip是.relative的子元素，而.relative在滚动容器里面。哪怕Tooltip用了绝对定位脱离正常流，浏览器还是会把它的边界算进容器的滚动区域（因为它属于容器的子树内容），所以当Tooltip靠近容器边缘时，容器的滚动范围就被撑开了。

额外小提示 #

• 一定要给Tooltip加background和z-index，不然可能会被容器里的内容挡住，看不清晰。
• 如果需要Tooltip跟着元素或者鼠标动，那就结合JS获取目标元素的位置，动态设置Tooltip的top/left或者用transform: translate()来定位，精度更高。

内容的提问来源于stack exchange，提问作者K. Tys