使一个position:absolute div在另一个可滚动div中正常滚动

Question

我有一个固定高度的可滚动

使用 position:fixed 定位在所有页面元素上。在 div 中，我的元素高于固定高度，因此出现滚动条。我还有一个工具提示，即使它滚动，我也想保留该段落。

这就是我想要在这里发生的事情，但不幸的是我的解决方案都无法正常工作：

1. 我将 position:absolute 添加到工具提示，将 position:relative 添加到 #overlay（工具提示的父级）：http://jsfiddle.net/4qTke/

   工具提示按预期滚动，但在 #overlay 之外不可见。

2. 我只将 position:absolute 添加到工具提示中：http://jsfiddle.net/ yp6Wf/

   工具提示在父级 #overlay 外部可见，但在 div 滚动时不会移动。

我希望工具提示始终可见并在滚动时移动。

Answer 1

仅使用 CSS 和 HTML 无法实现您想要的效果。

您遇到的主要问题是您在 #tooltip 相对于的容器上设置了 overflow:scroll 。因为当您将 #tooltip 放置在 div 的“外部”时，此溢出属性会阻止任何内容出现在其边缘之外，因此它将被隐藏，并且仅在滚动到时才可见。

它在第二种情况下可见的原因是，如果不设置 position:relative，您的 #tooltip 是相对于页面而不是容器的。这意味着它不受容器的 overflow:scroll 属性的影响。

Answer 2

HTML：

<div id="overlay">

    <div class="elemRel">

        <div class="elemAbs">

            <!-- Your Code -->

        </div>

    </div>

</div>

CSS：

#overlay { position:fixed; }
.elemRel { position:relative; }
.elemAbs { position:absolute; }

Answer 3

也许这对你来说是一个选择？请参阅演示小提琴。