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

我有一个带有固定可滚动边栏的页面。在侧边栏中悬停其中一个按钮时，我想在按钮旁边显示一个弹出窗口/工具提示。但是，工具提示比侧边栏大，因此需要从侧边栏中突出

这就是问题的起点。我无法获取工具提示，使其脱离固定容器。当它到达侧边栏的边缘时将被剪切

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

如果我修复了工具提示，它会一直工作，直到我开始滚动侧边栏，工具提示不再出现。工具提示是基于起始位置而不是当前位置固定的

这是一把小提琴，展示了三种情况：

基本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>

---

那么该怎么做呢？在可滚动的固定容器外是否有显示内容，并在滚动时使其与侧栏对齐。

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

但如果我这样做，我将如何将工具提示定位在我悬停的项目旁边？您可以将工具提示的位置设置为绝对，然后计算按钮相对于文档的位置（例如，使用jQuery.offset）然后设置工具提示的偏移量。此外，您还需要指定工具提示的z索引。此外，如果您的页面使用jquery.ui，您可以使用position-util方法。如果有办法的话，我希望通过css实现这一点。然后您需要避免以某种方式使用overflow-y:scroll

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