From b77568677752852f5d7c94552dfc9ba3e5ee660f Mon Sep 17 00:00:00 2001 From: adb-sh Date: Thu, 5 Jan 2023 02:07:06 +0100 Subject: [PATCH] add positions --- screens/position/allgemeines.html | 170 ++++++++++++++++++++++++++++++ 1 file changed, 170 insertions(+) create mode 100644 screens/position/allgemeines.html diff --git a/screens/position/allgemeines.html b/screens/position/allgemeines.html new file mode 100644 index 0000000..67ee10d --- /dev/null +++ b/screens/position/allgemeines.html @@ -0,0 +1,170 @@ + + + + + + + + Animationen + + + + + +
+

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. +

+
+
+
+ + + +