CSS如何修复一个单一的嵌套div时，滚动其他分层/嵌套的内容在一个容器

Question

我已经看到了一些关于固定位置元素的有趣的帖子，但是我有一个问题，我不能解决。

我在一个滚动的div容器中嵌套了许多div，就像我这里的例子

<div id="bottom" class="bottombox">
<div id="first" class="firstbox">
<div id="second" class="secondbox">
<div id="third" class="thirdbox">
<div id="top" class="topbox">
</div>
</div>
</div>
</div>

.bottombox
{
margin-top:0px;
margin-left:0px;
Position: absolute;
width: 200px;
height:200px;
overflow:auto;
background-color: darkblue;
}
.firstbox
{
margin-top:10px;
margin-left:10px;
width: 700px;
height:50px;
background-color: lightblue;
}
.secondbox
{
margin-top:20px;
margin-left:10px;
Position: absolute;
width: 700px;
height:50px;
background-color: brown;
}

.thirdbox
{
margin-top:30px;
margin-left:10px;
width: 100px;
height:100px;
/*Position: fixed;*/    
background-color: white;
}

.topbox
{
margin-top:40px;
margin-left:10px;
width: 700px;
height:500px;
background-color: darkgray;
}

正如你所看到的，有许多"图层"一起滚动。我遇到的问题是，我只想让白色盒子与底部盒子保持固定的关系，底部盒子实际上是容器。

这可以用CSS实现吗?如果没有，用Jquery来动态更新它的位置呢?

Answer 1

我想不出任何方法在CSS中做到这一点，但这里有一个jquery解决方案:

http://jsfiddle.net/drHam/7/

$("#bottom").scroll(function(){
    var $this = $(this);
    $(".thirdbox").css("top",$this.scrollTop())
                  .css("left",$this.scrollLeft());            
    $(".topbox").css("top", $this.scrollTop()*-1)
                .css("left",$this.scrollLeft()*-1);
});

Answer 2

我认为这对于纯CSS来说是不可能的。

我用jquery想出了一个解决方案，参见更新后的fiddle:

var bottom = $("#bottom");
var third = $("#third");
var top = $("#top");
bottom.scroll(function() {
    third.css("left", bottom.scrollLeft());
    third.css("top", bottom.scrollTop());
    top.css("left", -bottom.scrollLeft());
    top.css("top", -bottom.scrollTop());
});