Позиционирование движущихся <div>элементов в фоновом режиме с помощью CSS

Question

ОК, поэтому у меня есть эти фоны <div>, которые перемещаются влево и вправо с помощью плагина jQuery, спрайтно.

Итак, мне было интересно, как лучше их расположить.

Я, очевидно, указал оба из <div>, каждый из которых содержит одно фоновое изображение, чтобы иметь z-index: -1, поэтому они появляются позади всего остального.

Но я бы хотел, чтобы они были один за другим,строка за строкой, по сути, в фоновом режиме.

Мне просто нужно выяснить, как это сделать с помощью CSS, поэтому, если у вас есть какие-либо идеи, пожалуйста, дайте мне знать!

Спасибо!

ОБНОВЛЕНИЕ:

Попытка jsFiddle здесь: http://jsfiddle.net/uNmuf/

Кажется, единственной проблемой остается позиционирование ...

Для некоторыхпричина, по которой я пока не могу заставить его работать правильно ..

ОБНОВЛЕНИЕ ОБНОВЛЕНИЯ:

Эй, спасибо большое, Пэт, это на самом деле прекрасно работает!Проверьте 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>

Вы можетеувидеть это в действии здесь .