Schichtung verschachtelter Ebenen

[Heinzelhund]

Hallo Allesamt,

ich möchte zwei ineinander verschachtelte Elemente mittels den z-index übereinander schichten, wobei das höher liegende Element (rotes Quadrat) das Untere (blaues Quadrat) nach unten weg überlappt.

Das ist ja relativ einfach. Jetzt möchte ich jedoch, dass das höher liegende, überlappende Element auch anschließende Elemente überlappt. In meinem unteren Beispiel hieße das, dass das rote Quadrat auch das Grüne überlappen sollte.

Da das Ganze mittels einer Schleife ausgegeben wird, kann ich nicht einfach den z-index von id="blau" höher setzen als id="gruen". Zur Illustration hier ein kleines Beispiel:

<!-- 1. Schleifendurchgang -->
<div id="blau" style="position: relative; width: 100px; height: 100px; z-index: 1; background-color: navy; margin-bottom: 15px;">
  <div style="position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; z-index: 2; background-color: red;"></div>
</div>

<!-- 2. Schleifendurchgang -->
<div id="gruen" style="position: relative; width: 100px; height: 100px; z-index: 1; background-color: green;">
  <div style="position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; z-index: 2; background-color: yellow;"></div>
</div>

etc.

Ciao
Heinzelhund