Positionieren mit CSS

DruckversionPDF version

Sie können jeweils die linke obere oder die rechte untere Ecke einer Box definieren und so - zusammen mit Breiten und Höhen-Angaben - die Position eines Elementes auf der Webseite bestimmen.

Elemente können übereinander angezeigt werden. Die Ebene wird mit {z-index:0},{z-index:1},{z-index:2}... festgelegt, je höher der Wert, desto weiter oben liegt das Element.

{position:absolute;
top:20px;
left:20px;}

{position:fixed;
top:20px;
left:20px;}

Die Position wird von dem HTML-Eltern-Element aus bereichnet, das mit "absolute" oder "relative" positioniert ist.
Die oberste HTML-Ebene berechnet die Position vom Browserfenster aus. Bei fixed ist das Element beim Scrollen an der entsprechenden Bildschirmposition "fixiert".

{position:relative;
top:20px;
left:20px;}

Die Position wird von der Stelle aus berechnet, an der das Element ohne Stylesheet-Angaben angezeigt würde.

{float:left;} positioniert relative Elemente von links nach rechts, je nach verfügbarer Breite, ist kein Platz mehr vorhanden oder enthält ein Element {clear:left;}, beginnt die Positionierung wieder von links.

{float:right;} positioniert relative Elemente von rechts nach links, ist kein Platz mehr vorhanden oder enthält ein Element {clear:right;}, beginnt die Positionierung wieder von rechts.

 

rhein-main-experten.de wird überprüft von der Initiative-S