位置中的 HTML 元素：绝对与滚动答案

【问题标题】：HTML element in position:absolute vs. scroll位置中的 HTML 元素：绝对与滚动
【发布时间】：2013-09-05 18:29:16
【问题描述】：

我有两个将position 属性设置为absolute 的div。其中一个是另一个可滚动 div 的儿子。类似的东西：

<body>
  <div class="foo" id="outside"></div>

  <div class="bar">
    <div class="foo" id="inside"></div>
  </div>
</body>

在 CSS 中：

.foo{position:absolute;}
.bar{max-width: 300px;}

现在，假设bar div 的内容很长，因此用户可以滚动它（只是 div，而不是整个页面！）； inside div 不会与他的父亲一起滚动。相反，outside div 如果足够长可以滚动，它将随着整个页面滚动。我希望inside div 与bar div 一起滚动，如何重现outside div 在inside div 上的行为？

编辑：我再次阅读了我的帖子，它不是那么简单，我很抱歉。我会尝试一个例子：

http://jsfiddle.net/QYHSd/2/

当用户滚动绿色 div 时，我希望红色 div 与绿色 div 的内容一起滚动。如果我不能很好地解释我想要获得什么，再次抱歉。

【问题讨论】：

修复'bar'高度，并将他的'overflow'设置为'auto'。

标签： html css scroll position absolute

【解决方案1】：

将position: relative; 添加到.bar。这会将.foo 上绝对定位的上下文从body 更改为.bar。

.bar {
    position: relative;
    max-width: 300px;
    height: 100px;
    overflow-y:scroll;
    overflow-x:hidden;
}

jsFiddled here

【讨论】：

我建议你通过修改OP问题的jsFiddle来证明这一点。

【解决方案2】：

.bar {
max-width: 300px;
max-height: 300px;
overflow-y:scroll;
overflow-x:hidden;
}

这将使滚动条始终可见，即使 div 中没有内容。如果您希望滚动条仅在需要时显示，请使用“auto”而不是“scroll”。

【讨论】：