Animationen

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

1
2
3
4
#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

1
2
3
4
#example2 .active {
 position: relative;
 top: 1rem;
 left: 1rem;
}

Relativ zum normalen Dokument-flow wird das Element mit den Attributen top und left verschoben.

Absolute

1
2
3
4
#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

1
2
3
4
#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

1
2
3
4
5
6
7
8
9
10
#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.