使用CSS </div>在后台定位移动<div>元素

Question

好的，所以我有这些背景<div> s使用jQuery插件左右平移，精灵。

所以，我想知道定位它们的最佳方法是什么。

我显然已经指定了两个<div>两个，每个z-index: -1包含一个背景图片，以便{{1}}显示在其他所有内容之后。

但我希望他们能够一个接一个地在后台逐行。

我只需要了解如何使用CSS，所以你们有任何想法请告诉我！

谢谢！

更新

在这里尝试jsFiddle： http://jsfiddle.net/uNmuf/

唯一的问题似乎仍然是定位......

出于某种原因，我还不能让它正常工作..

更新更新：

嘿，非常感谢Pat，它确实很棒！查看jsFiddle和我的页面！

http://www.marioplanet.com

Answer 1

我会将它们放在从top: 0开始的第一行和top: height_of_first_div的第二行。理想情况下height_of_first_div将是常量，因此您可以在CSS中对其进行硬编码，但如果没有，您可以始终使用jQuery片段将其置于正确的位置上。

CSS看起来像这样，假设<div>是固定的高度：

div.pan {
   position: absolute;
   z-index: -1;
   left: 0;
   top: 0;

   height: 100px;   
}

div.row2 {
   top: 100px;
}

以及相关的HTML：

<div class="pan row1"></div>
<div class="pan row2"></div>

你可以看到它in action here。