add positions

fix style
2023-01-05 02:07:06 +01:00 · 2023-01-05 02:06:54 +01:00
18 changed files with 1996 additions and 1715 deletions
--- a/css/animations.css
+++ b/css/animations.css
@ -61,6 +61,7 @@
    }

 }
+
 /* -----------------Animationen Beispiele--------------------------- */
 /* -------Das Stempel Beispiel als Beispiel für die @keyframes-------*/
 #stempel1 {
@ -85,8 +86,7 @@
        transform: scale(1.5) rotate(30deg);
    }

-    100%
-    {
+    100% {
        transform: scale(1) rotate(10deg)
    }
 }
@ -117,8 +117,7 @@
        left: var(--width3);
    }

-    100%
-    {
+    100% {
        transform: scale(1);
        left: var(--width2);
    }
@ -150,8 +149,7 @@
        left: var(--width3);
    }

-    100%
-    {
+    100% {
        transform: scale(1);
        left: var(--width2);
    }
@ -183,8 +181,7 @@
        transform: rotate(180deg);
    }

-    100%
-    {
+    100% {
        transform: rotate(360deg)
    }
 }
@ -214,14 +211,12 @@
        transform: rotate(180deg);
    }

-    100%
-    {
+    100% {
        transform: rotate(360deg)
    }
 }


-
 /*--------------- Beispiel 1 für die animation timing funktion ---------------*/
 #beispiel1 {
    color: red;
@ -248,8 +243,7 @@
        left: var(--width3);
    }

-    100%
-    {
+    100% {
        transform: scale(1);
        left: var(--width2);
    }
@ -281,8 +275,7 @@
        left: var(--width3);
    }

-    100%
-    {
+    100% {
        transform: scale(1);
        left: var(--width2);
    }
--- a/css/layout.css
+++ b/css/layout.css
@ -1,4 +1,3 @@
-
 /* ---------- Farben ---------- */
 :root {
    --primary: #1D2026;
@ -70,6 +69,12 @@ footer {
    border-bottom: 4px solid var(--primary);
 }

+code {
+    padding: .25rem .75rem;
+    border-radius: .35rem;
+    background-color: rgba(40, 40, 40, 0.8);
+}
+
 .code-example {
    margin: 4px;
    padding: 8px;
@ -78,6 +83,11 @@ footer {
    max-width: 550px;
 }

+.code-example code {
+    padding: 0;
+    background-color: rgba(40, 40, 40, 0.8);
+}
+
 .visual-example {
    background-color: gray;
    border: 2px solid;
--- a/css/position.css
+++ b/css/position.css
@ -0,0 +1,62 @@
+section.examples .example-box {
+    background-color: #3268aa;
+    border: 3px solid #88ff9c;
+    height: 3rem;
+    width: 3rem;
+    border-radius: .3rem;
+    margin: .5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+section.examples .example-box.active {
+    border: 3px solid #d73f3f;
+}
+
+.visual-example {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    padding: .5rem;
+}
+
+#example1 .active {
+    position: static;
+    top: 1rem;
+    left: 1rem;
+}
+
+#example2 .active {
+    position: relative;
+    top: 1rem;
+    left: 1rem;
+}
+
+#example3 .active {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+}
+
+#example4 .active {
+    position: fixed;
+    top: 1rem;
+    left: 1rem;
+}
+
+#example5 {
+    overflow: scroll;
+}
+
+#example5 .active {
+    position: sticky;
+    left: 1rem;
+    right: 1rem;
+}
+
+#example5 .wrapper {
+    display: flex;
+    border: 2px solid #d73f3f;
+}
--- a/css/text_styling.css
+++ b/css/text_styling.css
@ -2,35 +2,45 @@
 #font-sizePX {
    font-size: 20px;
 }
+
 #font-sizePR {
    font-size: 120%;
 }
+
 #font-sizeCM {
    font-size: 1cm;
 }
+
 #font-sizeS {
    font-size: smaller;
 }
+
 #font-sizeM {
    font-size: medium;
 }
+
 #font-sizeL {
    font-size: larger;
 }
+
 /*--------------Veränderung der Textart--------------*/
 #font-familyA {
    font-family: Arial;
 }
+
 #font-familyG {
    font-family: Georgia;
 }
+
 #font-familyLH {
    font-family: Lucida Handwriting;
 }
+
 /*--------------Schriftfarbe ändern--------------*/
 #colorW {
    color: red;
 }
+
 #colorZ {
    color: rgb(81, 132, 109);
 }
@ -39,6 +49,7 @@
 #font-styleI {
    font-style: italic;
 }
+
 #font-styleO {
    font-style: oblique;
 }
@ -47,6 +58,7 @@
 #font-weightB {
    font-weight: bold;
 }
+
 #font-weightZ {
    font-weight: 700;
 }
@ -60,12 +72,15 @@
 #text-alignL {
    text-align: left;
 }
+
 #text-alignR {
    text-align: right;
 }
+
 #text-alignC {
    text-align: center;
 }
+
 #text-alignJ {
    text-align: justify;
 }
@ -74,10 +89,12 @@
 #text-decorationU {
    text-decoration: underline;
 }
+
 #text-decorationO {
    text-decoration: overline;
    margin: 4px;;
 }
+
 #text-decorationLT {
    text-decoration: line-through;
 }
@ -86,9 +103,11 @@
 #word-spacingMM {
    word-spacing: 3mm;
 }
+
 #word-spacingPX {
    word-spacing: 10px;
 }
+
 #word-spacingREM {
    word-spacing: 1rem;
 }
@ -97,9 +116,11 @@
 #text-indentMM {
    text-indent: 10mm
 }
+
 #text-indentPX {
    text-indent: 20px;
 }
+
 #text-indentREM {
    text-indent: 1rem;
 }
@ -108,12 +129,15 @@
 #text-transformC {
    text-transform: capitalize
 }
+
 #text-transformU {
    text-transform: uppercase
 }
+
 #text-transformL {
    text-transform: lowercase
 }
+
 #text-transformN {
    text-transform: none
 }
--- a/screens/animation/animations.html
+++ b/screens/animation/animations.html
@ -19,7 +19,7 @@
    <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
    <a href="../grid/allgemeines.html">Grid-Layout</a>
    <a href="../text_styling/allgemeines.html">Text-Styling</a>
-        <a href="position.html">Position-Eigenschaft</a>
+    <a href="../position/allgemeines.html">Position-Eigenschaft</a>
    <a href="animations.html">Animationen</a>
 </nav>
 <nav class="navigationbar">
--- a/screens/animation/keyframes.html
+++ b/screens/animation/keyframes.html
@ -19,7 +19,7 @@
    <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
    <a href="../grid/allgemeines.html">Grid-Layout</a>
    <a href="../text_styling/allgemeines.html">Text-Styling</a>
-        <a href="position.html">Position-Eigenschaft</a>
+    <a href="../position/allgemeines.html">Position-Eigenschaft</a>
    <a href="animations.html">Animationen</a>
 </nav>
 <nav class="navigationbar">
--- a/screens/flexbox/allgemeines.html
+++ b/screens/flexbox/allgemeines.html
@ -19,7 +19,7 @@
    <a href="allgemeines.html">Flexbox-Layout</a>
    <a href="../grid/allgemeines.html">Grid-Layout</a>
    <a href="../text_styling/allgemeines.html">Text-Styling</a>
-        <a href="position.html">Position-Eigenschaft</a>
+    <a href="../position/allgemeines.html">Position-Eigenschaft</a>
    <a href="../animation/animations.html">Animationen</a>
 </nav>
 <nav class="navigationbar">
--- a/screens/flexbox/eigenschaften.html
+++ b/screens/flexbox/eigenschaften.html
@ -19,7 +19,7 @@
    <a href="allgemeines.html">Flexbox-Layout</a>
    <a href="../grid/allgemeines.html">Grid-Layout</a>
    <a href="../text_styling/allgemeines.html">Text-Styling</a>
-        <a href="position.html">Position-Eigenschaft</a>
+    <a href="../position/allgemeines.html">Position-Eigenschaft</a>
    <a href="../animation/animations.html">Animationen</a>
 </nav>
 <nav class="navigationbar">
@ -37,7 +37,8 @@
            <h3 id="anchor21">flex-wrap</h3>
            <h4>Mit horizontaler Anordnung</h4>
            <div class="code-example">
-                    <code>#example3 { <br> &emsp; display: flex; <br> &emsp; flex-direction: row; <br> &emsp; flex-wrap: wrap; <br> }</code>
+                <code>#example3 { <br> &emsp; display: flex; <br> &emsp; flex-direction: row; <br> &emsp; flex-wrap:
+                    wrap; <br> }</code>
            </div>
            <div class="visual-example" id="example3">
                <p>p1</p>
@ -51,7 +52,8 @@
            </div>
            <h4>Mit vertikaler Anordnung</h4>
            <div class="code-example">
-                    <code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-direction: column; <br> &emsp; flex-wrap: wrap; <br> &emsp; max-height: 600px; <br> }</code>
+                <code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-direction: column; <br> &emsp; flex-wrap:
+                    wrap; <br> &emsp; max-height: 600px; <br> }</code>
            </div>
            <div class="visual-example" id="example4">
                <p>p1</p>
@ -70,7 +72,8 @@
            </p>
            <h3 id="anchor22">flex-flow</h3>
            <div class="code-example">
-                    <code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column wrap; <br> &emsp; max-height: 600px; <br> }</code>
+                <code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column wrap; <br> &emsp; max-height:
+                    600px; <br> }</code>
            </div>
            <p class="explanation">
                <code>flex-flow</code> ist ein Shortcut, welcher die Eigenschaften <code>flex-direction</code> und
@ -80,7 +83,8 @@
        <section>
            <h3 id="anchor23">justify-content</h3>
            <div class="code-example">
-                    <code>#example5 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; justify-content: center; <br> }</code>
+                <code>#example5 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
+                    justify-content: center; <br> }</code>
            </div>
            <div class="visual-example" id="example5">
                <p>p1</p>
@ -89,7 +93,8 @@
                <p>p4</p>
            </div>
            <div class="code-example">
-                    <code>#example6 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; justify-content: flex-end; <br> }</code>
+                <code>#example6 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
+                    justify-content: flex-end; <br> }</code>
            </div>
            <div class="visual-example" id="example6">
                <p>p1</p>
@ -114,7 +119,8 @@
        <section>
            <h3 id="anchor24">align-content</h3>
            <div class="code-example">
-                    <code>#example7 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; justify-content: flex-end; <br> &emsp; align-content: space-between; <br> }</code>
+                <code>#example7 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
+                    justify-content: flex-end; <br> &emsp; align-content: space-between; <br> }</code>
            </div>
            <div class="visual-example" id="example7">
                <p>p1</p>
@ -144,7 +150,8 @@
        <section>
            <h3 id="anchor25">overflow</h3>
            <div class="code-example">
-                    <code>#example8 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> &emsp; overflow-x: scroll; <br> }</code>
+                <code>#example8 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> &emsp; overflow-x:
+                    scroll; <br> }</code>
            </div>
            <div class="visual-example" id="example8">
                <p>p1</p>
@ -161,7 +168,8 @@
                <p>p12</p>
            </div>
            <div class="code-example">
-                    <code>#example9 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column nowrap; <br> &emsp; max-height: 600px; <br> &emsp; overflow-y: scroll; <br> }</code>
+                <code>#example9 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column nowrap; <br> &emsp;
+                    max-height: 600px; <br> &emsp; overflow-y: scroll; <br> }</code>
            </div>
            <div class="visual-example" id="example9">
                <p>p1</p>
--- a/screens/flexbox/unterelemente.html
+++ b/screens/flexbox/unterelemente.html
@ -19,7 +19,7 @@
    <a href="allgemeines.html">Flexbox-Layout</a>
    <a href="../grid/allgemeines.html">Grid-Layout</a>
    <a href="../text_styling/allgemeines.html">Text-Styling</a>
-        <a href="position.html">Position-Eigenschaft</a>
+    <a href="../position/allgemeines.html">Position-Eigenschaft</a>
    <a href="../animation/animations.html">Animationen</a>
 </nav>
 <nav class="navigationbar">
@ -36,7 +36,8 @@
        <section>
            <h3 id="anchor31">flex-grow</h3>
            <div class="code-example">
-                    <code>#example10 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example10 > p { <br> &emsp; flex-grow: 1; <br> }</code>
+                <code>#example10 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
+                    #example10 > p { <br> &emsp; flex-grow: 1; <br> }</code>
            </div>
            <div class="visual-example" id="example10">
                <p>p1</p>
@ -51,7 +52,8 @@
        <section>
            <h3 id="anchor32">flex-basis</h3>
            <div class="code-example">
-                    <code>#example11 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example11 > p { <br> &emsp; flex-basis: 100px; <br> }</code>
+                <code>#example11 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
+                    #example11 > p { <br> &emsp; flex-basis: 100px; <br> }</code>
            </div>
            <div class="visual-example" id="example11">
                <p>p1</p>
@ -65,7 +67,8 @@
        <section>
            <h3 id="anchor33">flex-shrink</h3>
            <div class="code-example">
-                    <code>#example12 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example12 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 0; <br> }</code>
+                <code>#example12 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
+                    #example12 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 0; <br> }</code>
            </div>
            <div class="visual-example" id="example12">
                <p>p1</p>
@ -76,7 +79,8 @@
                <p>p6</p>
            </div>
            <div class="code-example">
-                    <code>#example13 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example13 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 1; <br> }</code>
+                <code>#example13 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
+                    #example13 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 1; <br> }</code>
            </div>
            <div class="visual-example" id="example13">
                <p>p1</p>
--- a/screens/grid/allgemeines.html
+++ b/screens/grid/allgemeines.html
@ -19,7 +19,7 @@
    <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
    <a href="allgemeines.html">Grid-Layout</a>
    <a href="../text_styling/allgemeines.html">Text-Styling</a>
-        <a href="position.html">Position-Eigenschaft</a>
+    <a href="../position/allgemeines.html">Position-Eigenschaft</a>
    <a href="../animation/animations.html">Animationen</a>
 </nav>
 <nav class="navigationbar">
--- a/screens/grid/container.html
+++ b/screens/grid/container.html
@ -19,7 +19,7 @@
    <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
    <a href="allgemeines.html">Grid-Layout</a>
    <a href="../text_styling/allgemeines.html">Text-Styling</a>
-        <a href="position.html">Position-Eigenschaft</a>
+    <a href="../position/allgemeines.html">Position-Eigenschaft</a>
    <a href="../animation/animations.html">Animationen</a>
 </nav>
 <nav class="navigationbar">
@ -48,7 +48,8 @@
            </p>
            <div class="code-example">
                <code>
-                        .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br> &emsp; gap: 10px;<br>}
+                    .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br>
+                    &emsp; gap: 10px;<br>}
                </code>
            </div>
            <div class="visual-example" id="example4">
@ -70,7 +71,8 @@
            <br>
            <div class="code-example">
                <code>
-                        .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br> &emsp; grid-template-rows: 150px 100px 200px;<br>}
+                    .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br>
+                    &emsp; grid-template-rows: 150px 100px 200px;<br>}
                </code>
            </div>
            <div class="visual-example" id="example5">
@ -99,7 +101,8 @@
            </p>
            <div class="code-example">
                <code>
-                        .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: 50px 50px 50px;<br> &emsp; justify-content: space-evenly <br>}
+                    .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: 50px 50px 50px;<br>
+                    &emsp; justify-content: space-evenly <br>}
                </code>
            </div>
            <div class="visual-example" id="example6">
--- a/screens/grid/items.html
+++ b/screens/grid/items.html
@ -19,7 +19,7 @@
    <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
    <a href="allgemeines.html">Grid-Layout</a>
    <a href="../text_styling/allgemeines.html">Text-Styling</a>
-        <a href="position.html">Position-Eigenschaft</a>
+    <a href="../position/allgemeines.html">Position-Eigenschaft</a>
    <a href="../animation/animations.html">Animationen</a>
 </nav>
 <nav class="navigationbar">
--- a/screens/home.html
+++ b/screens/home.html
@ -16,7 +16,7 @@
    <a href="flexbox/allgemeines.html">Flexbox-Layout</a>
    <a href="grid/allgemeines.html">Grid-Layout</a>
    <a href="text_styling/allgemeines.html">Text-Styling</a>
-        <a href="position.html">Position-Eigenschaft</a>
+    <a href="../position/allgemeines.html">Position-Eigenschaft</a>
    <a href="animation/animations.html">Animationen</a>
 </nav>
 <main>
--- a/screens/position/allgemeines.html
+++ b/screens/position/allgemeines.html
@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animationen</title>
+    <link rel="stylesheet" href="../../css/layout.css">
+    <link rel="stylesheet" href="../../css/position.css">
+</head>
+
+<body>
+<header>
+    <h1>Animationen</h1>
+</header>
+<nav class="navigationbar">
+    <a href="../home.html">Home</a>
+    <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
+    <a href="../grid/allgemeines.html">Grid-Layout</a>
+    <a href="../text_styling/allgemeines.html">Text-Styling</a>
+    <a href="../position/allgemeines.html">Position-Eigenschaft</a>
+    <a href="../animation/animations.html">Animationen</a>
+</nav>
+<nav class="navigationbar">
+    <a href="./">Positionen</a>
+</nav>
+<main>
+    <article>
+        <section>
+            <h2>
+                Positionen mit CSS
+            </h2>
+            <p>
+                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
+                <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code> interpretiert werden.
+                Das kann zum Beispiel praktisch sein, wenn man auf einer Website einen fixierten Header setzen moechte.
+            </p>
+        </section>
+        <section class="examples">
+            <h3>Static</h3>
+            <div class="visual-example" id="example1">
+                <div class="example-box">1</div>
+                <div class="example-box active">2</div>
+                <div class="example-box">3</div>
+                <div class="example-box">4</div>
+            </div>
+            <div class="code-example">
+                <code>
+                    #example1 .active {<br>
+                    &emsp;position: static;<br>
+                    &emsp;top: 1rem;<br>
+                    &emsp;left: 1rem;<br>
+                    }
+                </code>
+            </div>
+            <p>
+                Obwohl die Eigenschaften <code>top</code> und <code>left</code> gesetzt sind, haben diese keine
+                Auswirkung, da die Positions-Eigenschaft auf <code>static</code> gesetzt ist.
+            </p>
+        </section>
+        <section class="examples">
+            <h3>Relative</h3>
+            <div class="visual-example" id="example2">
+                <div class="example-box">1</div>
+                <div class="example-box active">2</div>
+                <div class="example-box">3</div>
+                <div class="example-box">4</div>
+            </div>
+            <div class="code-example">
+                <code>
+                    #example2 .active {<br>
+                    &emsp;position: relative;<br>
+                    &emsp;top: 1rem;<br>
+                    &emsp;left: 1rem;<br>
+                    }
+                </code>
+            </div>
+            <p>
+                Relativ zum normalen Dokument-flow wird das Element mit den Attributen <code>top</code> und
+                <code>left</code> verschoben.
+            </p>
+        </section>
+        <section class="examples">
+            <h3>Absolute</h3>
+            <div class="visual-example" id="example3">
+                <div class="example-box">1</div>
+                <div class="example-box active">2</div>
+                <div class="example-box">3</div>
+                <div class="example-box">4</div>
+            </div>
+            <div class="code-example">
+                <code>
+                    #example3 .active {<br>
+                    &emsp;position: relative;<br>
+                    &emsp;top: 1rem;<br>
+                    &emsp;left: 1rem;<br>
+                    }
+                </code>
+            </div>
+            <p>
+                Das Element wird aus dem normalen Dokument-flow entfernt und absolut zum naechtsen
+                Eltern-Elements mit positions-Attribut <code>relative</code>, <code>absolute</code>, <code>fixed</code>
+                oder <code>static</code> platziert.
+            </p>
+        </section>
+        <section class="examples">
+            <h3>Fixed</h3>
+            <div class="visual-example" id="example4">
+                <div class="example-box">1</div>
+                <div class="example-box active">2</div>
+                <div class="example-box">3</div>
+                <div class="example-box">4</div>
+            </div>
+            <div class="code-example">
+                <code>
+                    #example4 .active {<br>
+                    &emsp;position: relative;<br>
+                    &emsp;top: 1rem;<br>
+                    &emsp;left: 1rem;<br>
+                    }
+                </code>
+            </div>
+            <p>
+                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.
+            </p>
+        </section>
+        <section class="examples">
+            <h3>Sticky</h3>
+            <div class="visual-example" id="example5">
+                <div class="example-box">1</div>
+                <div class="wrapper">
+                    <div class="example-box active">2</div>
+                    <div class="example-box">3</div>
+                </div>
+                <div class="example-box">4</div>
+                <div class="example-box">5</div>
+                <div class="example-box active">6</div>
+                <div class="example-box">7</div>
+                <div class="example-box">8</div>
+                <div class="example-box">9</div>
+                <div class="example-box">10</div>
+            </div>
+            <div class="code-example">
+                <code>
+                    #example5 .active {<br>
+                    &emsp;position: sticky;<br>
+                    &emsp;left: 1rem;<br>
+                    &emsp;right: 1rem;<br>
+                    }
+                </code>
+            </div>
+            <p>
+                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 <code>top</code>, <code>bottom</code>, <code>left</code> oder <code>right</code>.
+                Das Element kann sich dabei nur im direkten Eltern-Element bewegen; Box 2 und Box 3 sind zur
+                Veranschaulichung in einem extra div-Element.
+            </p>
+        </section>
+    </article>
+</main>
+<footer>
+    <p>Erstellt von: Alban Becker</p>
+</footer>
+</body>
+
+</html>
--- a/screens/text_styling/allgemeines.html
+++ b/screens/text_styling/allgemeines.html
@ -19,7 +19,7 @@
    <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
    <a href="../grid/allgemeines.html">Grid-Layout</a>
    <a href="allgemeines.html">Text-Styling</a>
-        <a href="position.html">Position-Eigenschaft</a>
+    <a href="../position/allgemeines.html">Position-Eigenschaft</a>
    <a href="../animation/animations.html">Animationen</a>
 </nav>
 <nav class="navigationbar">
--- a/screens/text_styling/beispiele.html
+++ b/screens/text_styling/beispiele.html
@ -19,7 +19,7 @@
    <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
    <a href="../grid/allgemeines.html">Grid-Layout</a>
    <a href="allgemeines.html">Text-Styling</a>
-        <a href="position.html">Position-Eigenschaft</a>
+    <a href="../position/allgemeines.html">Position-Eigenschaft</a>
    <a href="../animation/animations.html">Animationen</a>
 </nav>
 <nav class="navigationbar">
@ -208,7 +208,8 @@
                Textausrichtung ändern
            </h3>
            <p>
-                    Mit der Anweisung text-align kannst du die Ausrichtung eines textes zwischen Linksseitig, Mittig, Rechtsseitig und Blocksats ändern.
+                Mit der Anweisung text-align kannst du die Ausrichtung eines textes zwischen Linksseitig, Mittig,
+                Rechtsseitig und Blocksats ändern.
                Die Anweisung ist wie die anderen Anzuwenden.
            </p>
            <div class="code-example">
@ -243,7 +244,8 @@
                Textgestaltung
            </h3>
            <p>
-                    Mit hilfe der "text-decoration" Anweisung kann man der Schrift linien über, unter und durch die schrift Hinzufügen.
+                Mit hilfe der "text-decoration" Anweisung kann man der Schrift linien über, unter und durch die schrift
+                Hinzufügen.
                Die Anweisung wird ausgeführt wie die Vorherigen.
            </p>
            <div class="code-example">
@ -275,8 +277,10 @@
                Wort- und Zeichenabstände verändern
            </h3>
            <p>
-                    Die "word-spacing" Anweisung funktioniert im Grund wie die "font-size" Anweisung nur anstatt das man die Größe der Wörter verändert 
-                    erhöht oder veringert man den zwischen den einzelnen Worten. Der rest ist sozusagen identisch, außer das man den abstand nicht in Prozenten(%) 
+                Die "word-spacing" Anweisung funktioniert im Grund wie die "font-size" Anweisung nur anstatt das man die
+                Größe der Wörter verändert
+                erhöht oder veringert man den zwischen den einzelnen Worten. Der rest ist sozusagen identisch, außer das
+                man den abstand nicht in Prozenten(%)
                angeben kann, dafür aber in Milimetern(mm) und Punkten(pt).
            </p>
            <div class="code-example">
@ -303,7 +307,8 @@
                <li id="word-spacingREM">1 root-Element</li>
            </ol>
            <p class="explanation">
-                    Die Anweisung "letter-spacing" funktioniert genauso, nur dass sie den Abstand zwischen einzelnen Zeichen, 
+                Die Anweisung "letter-spacing" funktioniert genauso, nur dass sie den Abstand zwischen einzelnen
+                Zeichen,
                also jedem einzelnen Buchstaben, verändert anstatt zwischen den ganzen Wörtern.
            </p>
        </section>
@ -344,7 +349,8 @@
                Texte transvormieren
            </h3>
            <p>
-                    Nun zur letzten Anweisung zum Stylen von Texten in CSS. Mit "text-transform" kann der Nutzer Regeln für den Text festlegen, 
+                Nun zur letzten Anweisung zum Stylen von Texten in CSS. Mit "text-transform" kann der Nutzer Regeln für
+                den Text festlegen,
                die dann für alle Wörter gelten. Die Regeln die angewendet werden können sind:
            </p>
            <ol>
@ -354,7 +360,8 @@
                <li>None: Regeln werden aufgehoben.</li>
            </ol>
            <p>
-                    Damit lassen sich Text auf gewisse Situationen anpassen und vielleicht auch Probleme in der rechtschreibung für Leute, 
+                Damit lassen sich Text auf gewisse Situationen anpassen und vielleicht auch Probleme in der
+                rechtschreibung für Leute,
                mit Problemen in der Groß- und Kleinschreibung übergehen, da es so zu einem Stilmittel wird.
            </p>
            <div class="code-example">
Author	SHA1	Message	Date
adb-sh	b775686777	add positions All checks were successful continuous-integration/drone/push Build is passing Details	2023-01-05 02:07:06 +01:00
adb-sh	a0b133679b	fix style	2023-01-05 02:06:54 +01:00