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

[MudGuard]

Hi,

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:

CSS 2 handhabt das noch anders:

Values have the following meanings:

<integer>
    This integer is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context in which its stack level is '0'.

CSS 2 ist eine fertige Recommendation.
CSS 2.1 ist noch nicht mal Proposed Recommendation.

cu,
Andreas

[Tim Tepaße]

Hallo Andreas,

CSS 2 ist eine fertige Recommendation.
CSS 2.1 ist noch nicht mal Proposed Recommendation.

Wobei man hinzufügen sollte:

CSS Level 2, Revision 1 soll eine Anpassung des Standards an die Realität der Browser sein. Dazu kommt das veränderte Prozessmodell des W3Cs, so dass ein heutiger CR einem damaligen REC entspricht. Und siehe auch Ian Hicksons Bemerkungen dazu.

Tim

[Orlando]

Hallo Andreas,

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:

CSS 2 handhabt das noch anders:

Ja, deshalb auch mein Hinweis darauf. CSS2 ist diesbezüglich dermaßen unvollständig, dass die Beschreibung in CSS2.1 in Geschwafel ausartet.

CSS 2 ist eine fertige Recommendation.
CSS 2.1 ist noch nicht mal Proposed Recommendation.

Das ist mir klar. Hauptsache, man implementiert bereits CSS3, wegen des Führungsanspruchs und so. Was könnte ich mich manchmal aufregen …

Grüße
 Roland

[Thomas J.S.]

Hallo,

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

SELFHTML enthält folgendes Beispiel:

»

Wir haben mehrere, teils verschachtelte und jeweils mit z-index versehene Elemente. [...] 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.

Siehe den Bug https://bugzilla.mozilla.org/show_bug.cgi?id=78087

Interessant ist, wie aus der felsenfesten Behauptung Mozilla würde es richtig machen, ein Bug geworden ist.

Grüße
Thomas

PS: wer ist "Bärchen"? ;-)

[dbenzhuser]

N'Obend

PS: wer ist "Bärchen"? ;-)

Einer dieser sich hartnäckig haltenden Übersetzungsfehler...

Tschö,
dbenzhuser