css-boxen-problem (z-index)

ich hab hier zwei geschachtelte, uebereinanderliegende div/span-boxen. obwohl mit z-index die reihenfolge rote-box ueber gruene-box eingestellt ist, werden die boxen in der aufruf-reihefolge angezeigt. was ist verkehrt?

<div style="position:relative;width:400px;height:180px">
<div style="position:absolute;top:10px;height:80px;width:200px;background:#FF0000;z-index:2">rot
<span style="display:block;position:absolute;top:-10px;left:10px;width:150px;height:150px;background:#00FF00;z-index:1">gruen</span>
</div>
</div>

keine eine idee?

PRIEST

http://www.css4you.de/example/z-index.html

wieso benötigt der span tag ein zindex? macht keinen sinn und geht glaub auch net wirklich

glaube die ursache ist folgende:

Per z-index positionierte Elemente erzeugen für sich und ihre Nachfahren einen eigenen Stapel-Kontext. So werden im Beispiel die Boxen D, E und F als Nachfahren der Box C gesondert sortiert: Box F (z-index:-1) überdeckt trotz niedrigerem Wert Box B (z-index:1), da sie als Nachfahre von Box C (diese liegt mit z-index:3 über Box lediglich innerhalb dieser sortiert wird. Außerhalb des neuen Kontexts liegende Elemente (A und können nicht zwischen diesen gestapelt werden.

Quelle http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=z-index

zwutz

DerDurchDieTuerGeher schrieb:

glaube die ursache ist folgende:

Per z-index positionierte Elemente erzeugen fuer sich und ihre Nachfahren einen eigenen Stapel-Kontext. So werden im Beispiel die Boxen D, E und F als Nachfahren der Box C gesondert sortiert: Box F (z-index:-1) ueberdeckt trotz niedrigerem Wert Box B (z-index:1), da sie als Nachfahre von Box C (diese liegt mit z-index:3 ueber Box lediglich innerhalb dieser sortiert wird. Ausserhalb des neuen Kontexts liegende Elemente (A und koennen nicht zwischen diesen gestapelt werden.

Quelle http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=z-index

danke fuer die Info... das war auch mir neu