绝对 div 不会滚动它仍然是静态的答案

【问题标题】：The absolute div won't scroll it is still static绝对 div 不会滚动它仍然是静态的
【发布时间】：2014-10-13 16:40:43
【问题描述】：

我正在尝试在我的网页上的每个图像旁边放置一个框，该框将随着页面向下滚动，但仅在帖子/图像的范围内，如可以在 memecenter 找到，但我遇到了一些困难.

我已将父 div（帖子）设置为相对位置，将子 div（滚动框）设置为绝对位置，它们在 html 中相互嵌套，但子 div 不会滚动它仍然在页面上保持静态.

在此处查看代码：

.parent {
position: relative;
width: 613px;
overflow: hidden;
padding: 10px 0;
border-bottom: 1px solid #dddddd;
}
.child {
    position: absolute;
    width: 46px;
    height: 100px;
    float: right;
    margin-right: 20px;
}

和html：

<div class="parent">
  <div class="child">
  </div>
</div>

【问题讨论】：

标签： html css css-position

【解决方案1】：

CSS：

   .parent {
        background-color:Blue;
        position:fixed;
        width: 70%;
        height:100%;
        overflow: hidden;
        padding: 10px 0;
        border-bottom: 1px solid #dddddd;
        overflow-y:scroll;
        overflow-x:hidden;
    }
    .child {
        background-color:Grey;
        position: absolute;
        width: 30%;
        height:100%;
        float: right;
        margin-left:70%;
        overflow:hidden;
     }

 And Html :
    <div class="parent">
    </div>
    <div class="child">
    </div>

在这里找到小提琴Working EX

【讨论】：

【解决方案2】：

CSS：

    .parent 
    {
        background-color:Blue;
        position:fixed;
        width: 150px;
        height:200px;
        overflow: hidden;
        padding: 10px 0;
        border-bottom: 1px solid #dddddd;
        overflow:hidden;
    }
    .child {
        background-color:red;
        position: absolute;
        width: 460px;
        height: 220px;
        float: right;
        margin-left:150px;
        overflow:scroll;

    }

和html：

   <div class="parent">
    </div>
    <div class="child">
    </div>

请找一个可以工作的小提琴。

http://jsfiddle.net/Victor_AJ/8GS7b/13/

【讨论】：

我整天都在努力寻找一个可以工作的小提琴，但一无所获。
在上述小提琴中工作正常。 jsfiddle.net/Victor_AJ/8GS7b/13
它在小提琴中对我来说仍然保持静止，即使我将长度更改为很长，它仍然不会沿着长度向下滚动。我不希望父 div 被修复，只有子 div 看到这个小提琴......jsfiddle.net/8GS7b/23
Bump ...我认为每个人都误解了这个问题，因为这些小提琴根本没有向我展示任何东西。没有一个框是随页面浮动和滚动的。之后的所有内容都是固定的，但在边界内，而不是页面本身。如果这只能通过 javascript 实现，有人可以提供我可以尝试的 js 编辑吗？

【解决方案3】：

您可以使用“top”和“left”值。

CSS部分：

.parent {
    position.parent {
    position: relative;
    width: 613px;
    overflow: hidden;
    padding: 10px 0;
    border-bottom: 1px solid #dddddd;
    }

.child {
    position: absolute;
    left: 100px;
    top: 10px;
    width: 46px;
    height: 100px;
    float: right;
    margin-right: 20px;
    float: left;
}:

HTML部分：

<div class="parent">
    <img src="img.png" width="100px">
    <div class="child">This is image description</div>
</div>

【讨论】：

我试过了，但盒子仍然保持静止，不会像示例网站那样随页面滚动。