时间戳

首页 > 解决方案 > 绝对定位元素在其可滚动容器上创建溢出

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

问题描述

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

<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 解决方案可以让绝对元素在溢出滚动中不负责？

标签： htmlcssoverflowabsolute

解决方案

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

推荐阅读