z-index mit negativem Wert im »new stacking context«

[Orlando]

Werte Gemeinde,

aufgrund einer Feedback-Meldung habe ich mich mit der Spezifikation des z-index auseinandergesetzt.

SELFHTML enthält folgendes Beispiel:

  
<div id="box1" style="background:red; border:solid 2px blue;">box1</div>  
<div id="box2" style="background:blue; border:solid 2px white;">box2</div>  
<div id="box3" style="background:yellow; border:solid 2px red;">box3  
  <div id="box4" style="background:gold; border:solid 2px green;">box4</div>  
  <div id="box5" style="background:lime; border:solid 2px navy;">box5</div>  
  <div id="box6" style="background:red; border:solid 2px blue;">box6</div>  
</div>  

  
#box1 { position:absolute; top:50px;  left:10px; width:150px; height:150px; z-index:1; }  
#box2 { position:absolute; top:80px;  left:40px; width:100px; height:100px; z-index:2; }  
#box3 { position:absolute; top:120px; left:50px; width:150px; height:150px; z-index:3; }  
#box4 { position:absolute; top:80px;  left:20px; width:70px;  height:70px;  z-index:1; }  
#box5 { position:absolute; top:100px; left:10px; width:80px;  height:80px;  z-index:2; }  
#box6 { position:absolute; top:60px;  left:50px; width:90px;  height:90px;  z-index:-1; }  

Wir haben mehrere, teils verschachtelte und jeweils mit z-index versehene Elemente. Die Darstellung von 1 bis 3 ist klar, interessant wird’s bei den Elementen innerhalb von 3. Grundsätzliches zu »new stacking contexts«: 3 eröffnet einen solchen für sich und seine Kinder. Das heißt, 4, 5 und 6 werden „innerhalb“ von 3 sortiert und 4 liegt daher trotz „global“ betrachtet niedrigerem z-index über 3. Soweit ist alles klar. Interessant wird’s bei negativen Werten …

Firefox rückt 6 hinter sein eigenes Elternelement (3). Offenbar geht Bärchen davon aus, 3 habe (im neuen Kontext 3 -> 4,5,6) z-index:0 und lässt 6 (z-index:-1) nach hinten wandern. Das ist meiner Ansicht nach nicht korrekt. Gut, die Null wäre gemäß CSS2 durchaus korrekt, aber das ist hier nicht unbedingt relevant.

CSS2.1 geht nämlich davon aus, dass ein Element, das einen »new stacking context« eröffnet in diesem selbst den Hintergrund darstellt. Nachfahrenelemente mit negativem z-index werden _davor_ dargestellt:

http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index sagt:

Each stacking context consists of the following stacking
  levels (from back to front):

• the background and borders of the element forming the
    stacking context. (Anm.: 3)

• the stacking contexts of descendants with negative stack
    levels. (Anm.: 6)

• usw. usf. (4,5)

Das Phänomen erklärt auch, warum in Firefox beim SELFHTML-Beispiel für den z-index der fünfte Hund hinter dem Hintergrund (canvas) verschwindet. Auch das dürfte IMHO nicht sein. Oder übersehe ich hier etwas und lasse mich von contexts und levels verwirren?

Grüße
 Roland