使div停留在另一个绝对定位的溢出滚动div的顶部

debugcn 发表于 Dev

阿里雷扎

这是东西，这里.page绝对有一个div绝对位于tha页面上。里面有一个.containerdiv，容器内有.contents。

将.page具有一定的heigth，因此，内容将里面的滚动.page。在这种情况下，我希望.stuckdiv停留在顶部.page。（我确定我在上面犯了语法错误！）

无论如何，这个杂种：

更新：无论上的滚动如何，我都希望将.stuck其固定在顶部。.page.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;
}

我希望蓝色.stuckdiv始终位于.pagediv的顶部。有什么帮助吗？

更新：注意：一个快速的技巧可能是使.stuckbe，positions:fixed和相同的位置和宽度.page，但这不是我的回答，因为.pageJS随时可能会更改的坐标。

詹姆斯山

您可以在父元素上添加.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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。