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

Question

事情就是这样，有一个 div.page绝对位于该页面上。在里面，有一个.containerdiv 并且在容器内有.contents。

有一定的.page高度，所以内容会在.page. 在这种情况下，我希望.stuckdiv 贴在.page. （我确定我在上面犯了语法错误！）

无论如何，小提琴：

http://jsfiddle.net/YBAvb/

更新：我希望.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始终位于 div 的顶部.page。有什么帮助吗？

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

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>

Answer 2

因为 .page 的坐标可能随时随 JS 变化。

...所以你已经在使用 JS 了！:)

使用这种精确的 HTML 标记是不可能的
。对于这种情况，我们总是有 Javascript 和 jQuery：JSBIN DEMO

$('.stuck').each(function(){

  var $that = $(this),
      $page = $that.closest('.page');

  $page.scroll(function(){      
    $that.css({top: this.scrollTop});
  });

});