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

【问题标题】：Make a position:absolute div scroll normally within another scrollable div创建一个位置：绝对 div 在另一个可滚动的 div 中正常滚动
【发布时间】：2011-08-11 11:08:18
【问题描述】：

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

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

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

工具提示按预期滚动，但在#overlay 之外不可见。
我只在工具提示中添加position:absolute：http://jsfiddle.net/Yp6Wf/

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

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

【问题讨论】：

写得真好，谢谢！
不客气。很高兴有帮助。是否只有一个工具提示？它需要出现在哪里，即段落下方或侧面以及容器内部或外部？

标签： css scroll positioning css-position

【解决方案1】：

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

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

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

【讨论】：

你说得对，我没有这样想。我想我必须把有工具提示的段落放在可滚动区域的顶部，这样它就不会' t 溢出太频繁。

【解决方案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; }

【讨论】：

感谢您的回答，但这就是我在第一点所做的，这不是我想要的：/

【解决方案3】：

也许这对您来说是一个替代方案？见demo fiddle。

【讨论】：

这将使其成为常规使用，但在我的情况下，我真的需要工具提示留在段落下方，并在我滚动时跟随它。我猜@tw16 是对的，而且没有办法做到这一点，至少不使用一些 JavaScript 是不行的。