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

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

这就是问题出现的地方。我无法将工具提示移出固定容器。它在到达边栏的边缘时被切割。

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

如果我修改了工具提示，它将起作用，直到我开始滚动边栏并且工具提示没有跟随。工具提示是根据起始位置而不是当前位置来确定的。

这里是在三种情况小提琴： 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; 
}

那么如何去了解呢？无论如何，要让某些东西显示在可滚动的固定容器之外，并在滚动时保持其与侧边栏对齐。

来源

2014-01-10 Erik Honn

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

来源

2014-01-10 12:36:14 STO

但是，如果我这样做，我将如何定位工具提示旁边的项目，我徘徊？ –

您可以将工具提示的位置设置为绝对值，然后计算按钮相对于文档的位置（例如，使用jQuery.offset http://api.jquery.com/offset/），然后设置工具提示的偏移量。你也需要指定工具提示的z-index。 – STO

另外，如果你的页面使用jquery.ui，你可以使用位置实用程序的方法http://jqueryui.com/position/ – STO

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

回答

相关问题