css - 使一个 div 粘在另一个绝对定位的溢出滚动 div 的顶部

Question

事情是这样的，有一个 div .page 绝对定位在那个页面。在内部，有一个 .container div，在容器内有 .content。

.page 有一定的高度，因此内容会在.page 内滚动。在这种情况下，我想要一个 .stuck div 粘在 .page 的顶部。 (我确定我在上面犯了语法错误!)

无论如何， fiddle :

http://jsfiddle.net/YBAvb/

更新:我希望.stuck 固定在.page 的顶部，而不管 上的滚动。页面。

这是布局:

<div class="page">
    <div class="container">
        <div class="content"></div>
        <div class="stuck"></div>
    </div>
</div>

和我的(不工作的)CSS:

.page{
    position: absolute;
    top:50px;
    left:200px;
    width:200px;
    height:300px;
    overflow:auto;
}
.container{
    position:relative;
}
.stuck{
    position: absolute;
    top:0;
    right:0;
    left:0;
    height:50px;
    background:blue;
}
.content{
    height:700px;
    background:gray;
}

我希望蓝色的 .stuck div 始终存在 在 .page div 的顶部。有帮助吗？

更新: 注意:一个快速的技巧可能是使 .stuck 成为 positions:fixed 并且与 .page 的位置和宽度相同，但是这不是我的答案，因为 .page 的坐标可能随时随 JS 发生变化。

Answer 1

您可以将 .page 和 .stuck 添加到一个共同的父元素，并将一个覆盖在另一个之上。

http://jsfiddle.net/YBAvb/1/

    .page_holder{
        position: absolute;
        top:50px;
        left:200px;
        width:200px;
        height:300px;
    }
    .page {
        position: absolute;
        top:0;
        left:0;
        width:200px;
        height:300px;
        overflow:auto;
        z-index: 1;
    }
    .container {
        position:relative;
    }
    .stuck {
        position: absolute;
        top:0;
        right:0;
        left:0;
        height:50px;
        background:blue;
        margin-right: 18px;
        z-index: 2;
    }
    .content {
        height:700px;
        background:gray;
    }

    <div class="page_holder">
        <div class="stuck"></div>
        <div class="page">
            <div class="container">
                <div class="content"></div>
            </div>
        </div>
    </div>