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.7 KiB
HTML
171 lines
6.7 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>Positionen</title>
|
|
<link rel="stylesheet" href="../css/layout.css">
|
|
<link rel="stylesheet" href="../css/position.css">
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<h1>Positionen</h1>
|
|
</header>
|
|
<nav class="navigationbar">
|
|
<a href="../index.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="./allgemeines.html">Position-Eigenschaft</a>
|
|
<a href="../animation/animations.html">Animationen</a>
|
|
</nav>
|
|
<nav class="navigationbar">
|
|
<a href="./allgemeines.html">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 class="explanation">
|
|
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 class="explanation">
|
|
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 class="explanation">
|
|
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: fixed;<br>
|
|
 top: 1rem;<br>
|
|
 left: 1rem;<br>
|
|
}
|
|
</code>
|
|
</div>
|
|
<p class="explanation">
|
|
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 class="explanation">
|
|
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>
|