Ein bisher nicht allzu bekanntes Phänomen ist die abweichende Behandlung des z-indexes vom IE zu den anderen Browsern.
Das W3C besagt das der Standardwert für positionierte Elemente in Bezug auf den z-index der Wert “auto” ist.
Quelle: http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index
‘z-index’
Value: auto | <integer> | inherit
Initial: auto
Applies to: positioned elements
Inherited: no
Percentages: N/A
Media: visual
Daraus folgt das postionierte Elemente keinen Ebenenwert besitzen, außer sie liegen innerhalb eines positionierten Elements, dass einen solchen besitzt.
Die Reihenfolge in der Ebenenhierarchie für positionierte Elemente ohne z-index (=> auto) wird dann durch die Reihenfolge im Elementbaum entschieden.
Der IE kennt allerdings den Wert “auto” nicht und vergibt automatisch für positionierte Elemente den Wert “z-index:0″.
In der Regel ist das nicht weiter schlimm, hat aber zur Folge das bei bestimmten Konstellationen daraus unterschiedliche Ergebnisse resultieren.
Als Beispiel nehmen wir eine Seite die aus 3 Elementen besteht:
... <body> <div id="box1"> <div id="box1_1" /> </div> <div id="box2" /> <body> ...
Wir positionieren nun #box1 und #box2 relativ. #box1_1 wird absolut positioniert und bekommt ein z-index von 1.
Wir erwarten nun das #box1_1 über den beiden anderen Boxen liegt.
Bis auf den IE trifft das auch zu.
Wir wissen nun, dass der IE nicht den Wert auto vergeben hat für #box1 und #box2 sondern den Wert “0″.
Der “stack level”, also die Ebenenpositionen eines positionierten Elements ist immer relativ zum Kontext der positionierten Elternelemente:
Quelle: http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index
For a positioned box, the ‘z-index’ property specifies:
1. The stack level of the box in the current stacking context.
2. Whether the box establishes a local stacking context.Values have the following meanings:
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′.
auto
The stack level of the generated box in the current stacking context is the same as its parent’s box. The box does not establish a new local stacking context.
Sofern keine Elternelemente positioniert sind ist dieser Zusatz nicht wichtig.
Im Falle des IE tritt nun folgende Situation ein:
- #box1 und #box2 haben einen z-index von “0″. #box2 ist das auf #box1 folgende Element und liegt damit von der Hierarchieebene her über #box1.
- #box1_1 hat zwar einen z-index von “1″ ist aber im Kontext des Elternelements zu betrachten..
- #box1_1 liegt somit über dem Elternelement #box1 aber NICHT über #box2.
Wann tritt diese Situation ein und wie kann man sie umgehen?
Viele meiner Seiten bestehen aus einer Headsektion und einer darunter liegenden Contentsektion. Ich lege gerne die Navigation in den Headbereich damit Suchmaschinen und Textbrowser als erstes die Navigation zu sehen bekommen. Manchmal kommt es nun vor, dass zum Beispiel die Subnavigation optisch im Contentbereich platziert werden soll. Um die Struktur nicht zu brechen (Subnavigation liegt in der Hauptnavigation) hole ich die Subnavigation also per absoluter Positionierung heraus. Wenn nun Head- und Contentsektion relativ positioniert sind, haben wir das angesprochene Problem vorliegen.
Lösen lässt sich dieser Umstand zum Glück relativ leicht.
Damit wir direkt von Beginn der Entwicklung an ein einheitliches Bild auf allen Browsern bezüglich dieser Problematik haben weisen wir allen Elementen einen z-index von “0″ zu. Wir bringe damit alle Browser zu dem Standardverhalten vom IE:
CSS:
* {
margin: 0;
padding: 0;
border: 0;
z-index: 0;
}
Dem head - Element oder #box1 weisen wir nun einen z-index von “1″ zu. Damit liegt #box1 und somit #box1_1 über #box2 (bzw. head über content und somit auch die Subnavigation über content )
Ein Beispiel zum nachvollziehen gibt es hier. Am besten den IE und einen anderen Browser nebeneinander legen.
Aufgefallen ist mir das Problem erstmalig bei der Entwicklung des Bofrost Karriereportals.
Links/Quellen: