绝对定位元素在其可滚动容器上创建溢出

Question

我有一张需要水平滚动的长桌。在它的最后一列中，我有按钮显示悬停时的绝对定位工具提示。当表格本身最初没有创建滚动条时，悬停按钮并显示它的工具提示，会。

<div style="width: 400px; height: 200px; border: 1px solid red; padding: 20px; overflow-x: auto">
        <div style="background-color: red; width: 100%; height: 100%; position: relative">
            My table that needs a scrolling parent div, but often times fits into the screen while it's buttons are not on hover
            <div style="position: absolute; width: 100px; height: 100px; background-color: green; top: 50px; left: 350px">
                My table button's tooltip that appear on hover.
            </div>
        </div>
    </div>

在上面的例子中。 overflow-x 做它的事情并显示可见性的绝对元素是有意义的。但这是没有意义的，当我认为一个绝对元素超出正常流动因此溢出不应该考虑它时。

如果不按照表格的宽度切换溢出-x 可见和滚动，我该怎么办？是否有任何 CSS 解决方案可以让绝对元素在溢出滚动中不负责？

Answer 1

删除left: 350px;并添加right: 0;