Reihenfolge relativ und absolut positionierter DIVs

6.12.2009 von rmo.

Anne kam vor kurzem mit einem typischen Problem im Zusammenhang mit der Positionierung von relativ und absolut positionierten DIVs in einem Container-DIV.

Fast wie immer klappte alles im Firefox oder in Opera unter Linux (und Windows) - nur nicht im MS IE (7,8).

Worum ging es?

Das Container-DIV hatte nur die Aufgabe,  einen definierten Bereich innerhalb der Webseite vorzugeben und bei Bedarf Scrollbedarf zuzuschalten. Das DIV war in seiner Umgebung relativ positioniert.

Innerhalb des Containers hatte Anne eine Reihe aufeinanderfolgender, relativ positionierter  DIVs undefinierter Höhe.  Die Elemente der DIVs wurden durch Datenbankinhalte gefüllt. Insgesamt ergaben die relativ positionierten DIVs  einen Hintergrundsbereich innerhalb des Containers. Alle befanden sich in der gleichen Ebene, die durch eine z-Index festgelegt wurden.

Zusätzlich gab es ein weiteres DIV, das absolut positioniert wurde und für das ein höherer Wert im z-Index gewählt wurde. Dieses DIV sollte also immer vor den relativ positionierten DIVs angezeigt werden.

Also:

<div id=”container” …. >
 
<!– das absolut positionierte DIV –>
<div id=”abs” style=”position:absolute; …. z-index:10; “>
…..
</div>
 
<!– die relativ positionierten DIVs –>
<div id= “rel_1 ” style= “…; z_index:1; ” ….. > …. </div>
<div id= “rel_2 ” style= “…; z_index:1; ” ….. > ….  </div>
…..
…..
   
</div>

Im Firefox wurde das abslout positionierte DIV auch brav über allen anderen DIVs angezeigt; im MS IE7 dagegen nicht und im MS IE 8 nur, wenn der Seitenaufruf mit geänderten PHP-Parametern geschah. Ein reiner Seiten-Refresh führte immer zu einem Ausblenden des absolut positionierten DIVs.

Die Lösung 

Was hatte Anne falsch gemacht ? Aus meiner Sicht gar nichts. Außer, dass sie hätte davon ausgehen müssen, dass der MS IE ein wenig Hilfe benötigt:

Der MS IE kriegt die obige Reihenfolge nämlich nicht auf die Reihe - im wahrsten Sinne des Wortes !

Hätte Anne die Reihenfolge von vornherein wie folgt gewählt, wäre nichts passiert:

<div id=”container” …. >
 
<!– die relativ positionierten DIVs –>
<div id=”rel_1″ style=”…; z_index:1;” ….. > ….  </div>
<div id=”rel_2″ style=”…; z_index:1;” …..> ….  </div>
…..
…..
 
<!– das absolut positionierte DIV –>

<div id=”abs” style=”position:absolute; …. z-index:10; “>
…..
</div>
 
</div>

Merke:

Im MS IE ist es zwingen, die relativ positionierten DIVs vor den absolut definierten DIVs zu definieren. Sonst bekommt der MS IE den Ebenenaufbau nicht hin.

Arme Web-Designer ! Das ist kein Spass mit dem MS IE.

Geschrieben in Web - Browser und Co., LAMP / Webentwicklung | Keine Kommentare »