16.08.2008

Position: absolute - Oft geht's ohne besser (Teil I)

Gerade bei CSS-Anfängern ist immer wieder festzustellen, dass sie die CSS-Eigenschaft position: absolute verwenden und dann absolut nicht verstehen können, weshalb ihre Seite bei verschiedenen Bildschirmgrößen unterschiedlich angezeigt wird.

Deshalb folgender von mir entwickelter Merksatz vorweg:

Position "absolute" heißt so, weil es meist "absolut" unnötig ist und nur Probleme verursacht.
Verwende es nur dann, wenn du dir "absolut" sicher bist, was es bedeutet.
Die meisten Positionierungen kann man viel besser und unproblematischer mit float- und/oder margin-Angaben vornehmen.

Die wohl häufigste Frage in diesem Zusammenhang: "Ich habe meine Seite mit position: absolute zentriert, aber an einem anderen Bildschirm wird sie ganz anders dargestellt."
Als "horizontal zentrierender Code" wird dann meist eine Konstruktion wie diese verwendet:

* {
margin: 0;
padding: 0;
}

#box {
width: 500px;
height: 500px;
background: #8B008B;
position: absolute;
left: 250px;

}

Sehen wir uns das Ergebnis in Demo 1 an:
Nur wer viel Glück hat, wird die farbige Box in der Mitte seines Bildschirms sehen. Dieses "Glück" hängt davon ab, dass das Bildschirmfenster exakt 1000px breit ist. Nur dann geht die Rechnung auf: 250px links eingerückt, 500px Boxbreite, verbleiben als "rechter Rand" ebenfalls noch 250px und die Box ist tatsächlich horizontal zentriert. Der Webmaster dieser Konstruktion hatte ganz offensichtlich einen Bildschirmviewport von 1000px Breite und hat dann so lange mit dem left-Wert experimentiert, bis die Box in der Mitte war. So weit, so gut - zumindest für die Darstellung an seinem Bildschirm.

Wird man sich jedoch der Bedeutung von position: absolute bewusst, so wird schnell klar, dass dieses Vorgehen denkbar ungeeignet ist, die Box horiziontal zu zentrieren.
"Position: absolute" bedeutet nämlich, dass die Box zum nächst höheren, ebenfalls positionierten Element absolut positioniert wird. Ist ein solch positioniertes Element nicht vorhanden, dann ist Bezugspunkt der body.
Die #box wird in diesem Fall durch die absolute Positionierung in Verbindung mit left: 250px also 250px von der linken Bodyseite nach rechts eingerückt:

Position absolute

Hat das Bildschirmfenster nun aber eine Breite von beispielsweise 1400px, so bleibt die absolute Position von links mit 250px unverändert. Folge: Der Platz rechts neben der Box ist dann keine 250px mehr breit, sondern
1400px Bildschirmbreite - 500px Boxbreite - 250px linker Abstand = 650px
Die Zentrierung ist damit im Eimer - Dank "position: absolute"!

Erkenntnis:
Mangels näherer Kenntnis wurde eine ungeeignete CSS-Eigenschaft verwendet. Viel besser wäre gewesen, die Box nach dieser Methode mit margin: 0 auto zu zentrieren. Hierbei wird nämlich automatisch der linke und rechte Abstand entsprechend dem insgesamt verfügbaren Platz gleich berechnet.

Nun folgt die Frage, wozu man diese Angabe denn überhaupt nutzen kann, wenn sie wie hier nur Probleme bereitet.
Einige Anwendungsbeispiele werden in Teil II zu diesem Thema erläutert.

nach oben


Warning: include(mainincludes/footer.php): failed to open stream: No such file or directory in /var/www/web539/html/gehtsgarnet/subdomains/ohne-css/0045.php on line 127

Warning: include(mainincludes/footer.php): failed to open stream: No such file or directory in /var/www/web539/html/gehtsgarnet/subdomains/ohne-css/0045.php on line 127

Warning: include(): Failed opening 'mainincludes/footer.php' for inclusion (include_path='.:/opt/php/7.2.11/share/pear') in /var/www/web539/html/gehtsgarnet/subdomains/ohne-css/0045.php on line 127