Question

我有一个带固定可滚动侧边栏的页面。当鼠标悬停在侧边栏中的一个按钮时，我想在按钮旁边显示一个弹出/工具提示。然而，工具提示比侧边栏大，所以它需要从中伸出。

这就是问题的起点。我无法将工具提示移到固定容器之外。当它到达侧边栏的边缘时被切断。

这似乎与它可滚动有关。如果我删除overflow-y：从侧边栏滚动工具提示开始工作，但是当它可滚动时它不会。如果我只是使用边距向右移动侧边栏，并且如果我根据您悬停的元素绝对定位它，则会发生同样的情况。

如果我修复了工具提示，它会起作用，直到我开始滚动侧边栏并且工具提示不跟随。工具提示基于起始位置而非当前位置固定。

这是一个显示三种情况的小提琴： http://jsfiddle.net/8VF22/2/

基本的html和css：

<div class="main">
    <div class="sidebar">
        <div class="button">Hover me
            <div class="tooltip">This tooltip hates my life and won't go outside the sidebar</div>
        </div>
    </div>
</div>

-

.sidebar {
    position: fixed;
    height: 100%;
    overflow-y: scroll;
}

那怎么办呢？无论如何要在可滚动的固定容器外面显示某些内容并在滚动时使其与侧边栏保持对齐。

Answer 1

您需要将工具提示div附加到正文，而不是附加到侧边栏。由于您设置了overflow-y以滚动侧边栏，因此overflow-x会自动设置为隐藏或自动，但不会显示。

绝对定位的div伸出可滚动的固定位置div

1 个答案: