You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

171 lines
6.6 KiB
HTML

<!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>