Есть два контейнера. Один исправлен и покрывает 100% экрана. Второй относительный - содержит прокручиваемый контент. Проблема состоит в том, что четыре элемента должны быть расположены относительно друг друга следующим образом: 1-й в фиксированном контейнере, 2-й в абсолютном, 3-й фиксированный, 4-й в абсолютном.

<div class="container fixed">
    <div class="el z1"></div>
    <div class="el z3"></div>
</div>
<div class="container relative">
    <div class="el z2"></div>
    <div class="el z4"></div>
</div>

Однако z-индекс одного из родителей всегда будет меньше другого, что не позволяет сделать заказ на 4 дочерних элемента.

Есть скрипкаhttp://jsfiddle.net/only_dimon/zkY4C/6/ Я хочу заказать: желтый, зеленый, белый, черный снизу. Но как видите - желтый, белый, зеленый, черный.

Результат, который я хочу:

Но элементы должны быть в разных контейнерах.

Заранее спасибо!

Это помогает мне: Для многих элементов помогает только html реконструкция. К счастью, мне не нужно использовать фиксированный контейнер для фиксированных элементов, потому что фиксированное положение и размеры элемента зависят от размера окна, даже если я помещу их в относительный контейнер.