add positions
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
a0b133679b
commit
b775686777
@ -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>
|
||||
 position: static;<br>
|
||||
 top: 1rem;<br>
|
||||
 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>
|
||||
 position: relative;<br>
|
||||
 top: 1rem;<br>
|
||||
 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>
|
||||
 position: relative;<br>
|
||||
 top: 1rem;<br>
|
||||
 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>
|
||||
 position: relative;<br>
|
||||
 top: 1rem;<br>
|
||||
 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>
|
||||
 position: sticky;<br>
|
||||
 left: 1rem;<br>
|
||||
 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>
|
||||
Loading…
Reference in New Issue