对于我的网站设计，我有一个<div class="stuffhere"></div>内容存储的位置。这些 div 有 2 个。第二个在第一个之前，借助z-index:还有两者的内容stuffhere标签重复，但有时顶层的图像stuffhere被替换为垫片。
我可以用图像来最好地描述这种设置的原因。
Update: (new images!)
how my code renders the page http://img5.imageshack.us/img5/8246/portfolio4.png
请注意如何凯西网页设计形象不受条纹背景的影响，而其他块则受到影响。这凯西网页设计形象是屏幕截图中唯一未被背景着色的元素。
这是因为里面的元素back div带有条纹背景，而元素前分区不是。
背面 div 的不透明度为 0.55，带有条纹背景。由于前面的 div 没有背景且不透明度为 1，因此其内容不受条纹背景的影响，因此不会着色。是的，它确实有色调。我可以用另一张图片来说明这一点。
In the same code snapshot below, showing you it again, you will see that for some images overlap each other. A good example of this is the one called work_title_heroesforhire.png and work_title_heroesforhire-F.png
为什么是这样？
Below is the image without the F suffix.
It's affected by opacity as it's placed in the back layer.
Below is the image with the F suffix.
It's not affected by opacity as it's placed in the front layer.
这就是为什么屏幕截图内的文本没有条纹背景色调的原因。
Now you understand how my design works, here's the problem. When I scroll, this happens...
如何让2个div同时滚动？有没有办法可以用javascript同步2个div的滚动？ jQuery 更可取。
Update 您可以查看工作示例网页
下面的示例将底部 div 动态定位在顶部 div 后面，并且当您滚动顶部 div 时，底部 div 也会动态滚动。
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script>
$(document).ready(function(){
var topdivPos = $("#topdiv").position();
$("#bottomDiv").css("position","absolute").css("top",topdivPos.top).css("left",topdivPos.left).show();
$("#topdiv").scroll(function(){
$("#bottomDiv").scrollTop($("#topdiv").scrollTop());
});
});
</script>
</head>
<body>
<div id="topdiv" style="width:300; height:100; overflow:auto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<div id="bottomDiv" style="display:none;width:300; height:100; overflow:auto;z-index:-100">
<img src="http://www.pixtual.com/wallpaper/Pixtual-10-3-2008.png"/>
</div>
</body>
</html>