创建一个位置：绝对div通常在另一个可滚动的div中滚动

Question

我使用<div id="overlay">将可滚动的固定高度position:fixed放在所有页面元素上。在div中，我的元素高于固定高度，因此会出现滚动条。我还有一个工具提示，即使它已滚动，我也希望保留一段。

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

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

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

2. 我只在工具提示中添加position:absolute：http://jsfiddle.net/Yp6Wf/

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

我希望工具提示始终可见 AND ，以便在滚动时移动。

Answer 1

使用CSS和HTML无法实现所需。

您遇到的主要问题是您在overflow: scroll相对的容器上设置了#tooltip。由于此溢出属性会阻止任何内容在#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

也许这是你的另类选择？请参阅demo fiddle。