position - Positionierung |
 Mit der CSS-Eigenschaft „position“ wird die Art und Weise definiert, mit der HTML-Elemente auf einer Webseite positioniert werden. Dabei sind folgende Werte möglich:
static: in Abhängigkeit der Reihenfolge im HTML-Dokument (Standard) relative: relativ zur eigentlichen Position fixed: relativ zum sichtbaren Bereich des Browsers absolute: relativ zum nächsten übergeordneten Element, das nicht mit „static“ positioniert ist. Für die eigentliche Positionierung werden dann die folgenden CSS-Eigenschaften verwendet: top right bottom left Der Befehl "position" entfernt Elemente aus dem normalen Elementfluss und positioniert sie an jede beliebige Stelle (auch außerhalb) des Viewports. |
| position - Positionierung | |||
| Befehle | Beschreibung | Wert | Beispiele |
| <position> |
Die Eigenschaft position entfernt Elemente aus dem normalen Elementfluss und positioniert sie an jede beliebige Stelle (auch außerhalb) des Viewports.
absolute = losgelöst vom Textfluss, an eine Stelle, die per left, right, top und bottom festgelegt wird. fixed = starr am Viewport ausgerichtet, mit left, right, top und bottom festgelegt relative = Bezugspunkt für absolut positionierte Kindelemente |
table { position: absolute; right: 5em; top: 2em; } | |
| absolute |
Das Element wird relativ zu seinem ersten positionierten (nicht statischen) Vorgängerelement positioniert.
=> losgelöst vom Textfluss |
#child1 {position: absolute; border: 1px solid red; top: 70px; right: 15px; } | |
| <right> | Abstand nach rechts | auto, %, länge | |
| <top> |
Die Eigenschaft top legt die obere Position positionierter Elemente fest.
ein numerisches Längenmaß wie 4.5cm oder 300px eine Prozentangabe = bezieht sich auf die Höhe des umschließenden Blocks. Negative Werte sind erlaubt. auto = Voreinstellung, keine besondere Startposition inherit = erbt die entsprechende Angabe des Elternelements |
aside { position: absolute; right: 5em; top:2em; } | |
| <bottom> | Abstand nach unten | auto, %, länge | |
| <left> | Abstand nach links | auto, %, länge | |
| <overflow> | overflow | visible, , hidden, scroll, auto | |
| <vertical-align> |
Vertikale Ausrichtung |
auto, %, länge, baseline, sub, super, top, text-top, middle, bottom, text-bottom | |
| <z-index> | Stapelreihenfolge | auto, zahl | |
| static |
Standardwert. Elemente werden in der Reihenfolge gerendert, wie sie im Dokumentenfluss erscheinen => Element verbleibt im Textfluss |
#parent1 {position: static; border: 1px solid blue; width: 300px; height: 100px;} | |
| fixed |
Das Element wird relativ zum Browserfenster positioniert. => starr am Viewport ausgerichtet |
#parent4 {position: fixed; border: 1px solid blue; background-color: rgba(255,200,200,0.5); width: 300px; height: 100px;} | |
| relative |
Das Element wird relativ zu seiner normalen Position positioniert, also fügt 'left:20px' 20 Pixel zur LINKEN Position des Elements hinzu.
=> absolut positionierte Kindelemente |
#parent2 {position: relative; border: 1px solid blue; width: 300px; height: 100px;} | |
| sticky |
Das Element wird basierend auf der Scroll-Position des Benutzers positioniert.
Ein Sticky-Element wechselt je nach Scroll-Position zwischen relativ und fest.
Es wird relativ positioniert, bis eine vorgegebene
Versatzposition im Ansichtsfenster erreicht wird. => behält Position im Elementfluss |
||
| initial |
Setzt diese Eigenschaft auf ihren Standardwert. => Vererbung steuernde Werte |
||
| inherit |
Erbt diese Eigenschaft von seinem übergeordneten Element. => Vererbung steuernde Werte |
||