CSS Positions sind eine grundlegende Eigenschaft im Webdesign, die es ermöglicht, Elemente genau dort auf der Seite zu positionieren, wo man sie haben möchte. In diesem Beitrag werden wir uns die verschiedenen CSS Positionstypen ansehen und wie man sie verwendet.
Es gibt fünf verschiedene Positionstypen in CSS: static
, relative
, absolute
, fixed
und sticky
. Jeder dieser Typen hat seine eigenen Eigenschaften und Verwendungszwecke.
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenPosition: static;
Die static
Positionierung ist die Standardposition in CSS und bedeutet, dass das Element an seiner ursprünglichen Position auf der Seite bleibt. Diese Positionierung wird normalerweise nicht explizit angegeben, da sie bereits die Standardposition ist.
.element {
position: static;
}
Position: relative;
Bei der relative
Positionierung wird das Element relativ zu seiner ursprünglichen Position verschoben. Man kann die Positionierung mit top
, bottom
, left
und right
anpassen. Wenn man beispielsweise top: 10px
angibt, wird das Element 10 Pixel unterhalb seiner ursprünglichen Position angezeigt.
.element {
position: relative;
top: 10px;
}
Position: absolute;
Die absolute
Positionierung positioniert das Element relativ zum nächsten übergeordneten Element, das nicht static
positioniert ist. Wenn kein solches Element vorhanden ist, wird das Element relativ zur Seite positioniert. Diese Positionierung kann mit top
, bottom
, left
und right
angepasst werden.
.parent {
position: relative;
}
.element {
position: absolute;
top: 10px;
left: 20px;
}
Position: fixed;
Eine Positionierung mit fixed
bewirkt, dass das Element immer an derselben Stelle auf der Seite bleibt, auch wenn man die Seite scrollt. Diese Positionierung kann ebenfalls mit top
, bottom
, left
und right
angepasst werden.
.element {
position: fixed;
top: 10px;
left: 20px;
}
Position: sticky;
Die Positionierung mit sticky
ist eine Mischung aus relative
und fixed
. Das Element wird relativ zum normalen Dokumenten-Flow positioniert, bis es eine bestimmte Position erreicht. An diesem Punkt wird das Element fixed
positioniert und bleibt an seiner Stelle, auch wenn man die Seite scrollt.
.element {
position: sticky;
top: 10px;
}
Fazit
Durch das Verständnis der verschiedenen Positionstypen und ihrer Verwendungszwecke kann man eine genauere Kontrolle über das Layout der Webseite erlangen. CSS Positions sind eine wichtige Eigenschaft, um Elemente auf der Seite genau dort zu positionieren, wo man sie haben möchte.