【问题标题】: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 中,我的元素高于固定高度,因此出现滚动条。我还有一个工具提示,即使它被滚动,我也想留在段落中。

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

  1. 我将position:absolute 添加到工具提示中,并将position:relative 添加到#overlay(工具提示的父级):http://jsfiddle.net/4qTke/

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

  2. 我只在工具提示中添加position:absolutehttp://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 是不行的。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-06-20
  • 1970-01-01
  • 1970-01-01
  • 2016-11-05
  • 2015-11-01
  • 1970-01-01
相关资源
最近更新 更多