z-index de elementos em diferentes pais no Chrome

Existem dois contêineres. Um é fixo e cobre 100% da tela. O segundo é relativo - contém conteúdo rolável. O problema é que existem quatro elementos a serem posicionados um em relação ao outro da seguinte forma: 1º em contêiner fixo, 2º em absoluto, 3º fixo, 4º em absoluto.

<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>

No entanto, o índice z de um dos pais será sempre menor do que o outro, o que não permite fazer a ordem para elementos de 4 filhos.

Há violinohttp://jsfiddle.net/only_dimon/zkY4C/6/ Eu quero ordem: amarelo, verde, branco, preto de baixo. Mas como você pode ver - amarelo, branco, verde, preto.

O resultado que eu quero:

Mas os elementos devem estar em contêineres diferentes.

Desde já, obrigado!

Isso ajuda para mim: Para muitos elementos ajuda apenas a reconstrução de html. Felizmente, não preciso usar o contêiner fixo para elementos fixos, porque a posição e os tamanhos do elemento fixo dependem do tamanho da janela, mesmo que eu os coloque em um contêiner relativo.

questionAnswers(2)

yourAnswerToTheQuestion