+ Positionen mit CSS +
+
+ Mit den verschiedenen Positions-Eigenschaften wird definiert wie sich die Position
+ eines Elementes relativ zum Parent-Element verhaelt. Das hat auswirkungen darauf, wie die Eigenschaften
+ top
, bottom
, left
, right
interpretiert werden.
+ Das kann zum Beispiel praktisch sein, wenn man auf einer Website einen fixierten Header setzen moechte.
+
Static
+
+ #example1 .active {
+ position: static;
+ top: 1rem;
+ left: 1rem;
+ }
+
+
+ Obwohl die Eigenschaften top
und left
gesetzt sind, haben diese keine
+ Auswirkung, da die Positions-Eigenschaft auf static
gesetzt ist.
+
Relative
+
+ #example2 .active {
+ position: relative;
+ top: 1rem;
+ left: 1rem;
+ }
+
+
+ Relativ zum normalen Dokument-flow wird das Element mit den Attributen top
und
+ left
verschoben.
+
Absolute
+
+ #example3 .active {
+ position: relative;
+ top: 1rem;
+ left: 1rem;
+ }
+
+
+ Das Element wird aus dem normalen Dokument-flow entfernt und absolut zum naechtsen
+ Eltern-Elements mit positions-Attribut relative
, absolute
, fixed
+ oder static
platziert.
+
Fixed
+
+ #example4 .active {
+ position: relative;
+ top: 1rem;
+ left: 1rem;
+ }
+
+ + Das Element wird aus dem normalen Dokument-flow entfernt und absolut zum viewport positioniert. + Das Element ist nun oben links auf der Webseite zu finden. +
+Sticky
+
+ #example5 .active {
+ position: sticky;
+ left: 1rem;
+ right: 1rem;
+ }
+
+
+ Das Element is im normalen Dokument flow-platziert. Sobald das Element allerdings von einem
+ uebergeordneten Element mit overflow-Eigenschaft die Kante erreicht, greift die entsprechende
+ Eigenschaft top
, bottom
, left
oder right
.
+ Das Element kann sich dabei nur im direkten Eltern-Element bewegen; Box 2 und Box 3 sind zur
+ Veranschaulichung in einem extra div-Element.
+