Die position-Eigenschaft gibt die Art der Positinierungsmethode für ein Element an.
Da sind fünf unterschiedliche Position-Werte:
static
relative
fixed
absolute
sticky
Elemente werden mit den Eigenschaften oben(top), unten(bottom), links(left) und rechts(right) positioniert.
Diese Eigenschaften werden nicht funktionieren wenn nicht zuerst die Position-Eigenschaft geschrieben wurde.
position: static;
HTML Elemente werden nach Vorlage static (statisch) positioniert.
Statisch positionierte Elemente werden von den Eigenschaften oben (top), unten (bottom), links (left) und rechts (right) nicht beeinflusst.
Ein Element mit position: static; wird nicht speziell ausgerichtet.
Die Elemente werden immer positioniert gemäss Seitenfluss (Dokumentfluss) der Seite:
Dieses <main> Element wird positioniert: static;
<!DOCTYPE html>
<html>
<head>
<style>
main.static {
position: static;
border: 3px solid grey;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>Ein Element mit position: static; wird nicht speziell ausgerichtet.Die Elemente werden immer positioniert gemäss Seitenfluss (Dokumentfluss) der Seite:</p>
<main class="static">
Dieses main Element wird mit position: static; ausgerichtet im Dokumentfluss.
</main>
</body>
</html>
position: relative;
Ein Element mit position: relative; ist positioniert relative(relativ) zu seiner normalen Position.
Setzen der top, right, bottom, und left Eigenschaften positionieren das Element von seiner normalen Position aus.
<!DOCTYPE html>
<html>
<head>
<style>
main.relative {
position: relative;
left: 30px;
border: 3px solid grey;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>Ein Element mit position: relative; ist positioniert relativ zu seiner normalen Position:</p>
<main class="relative">
Dieses main-Element wird mit position: relative; positioniert.
</main>
</body>
</html>
Ein Element mit position: fixed;
ist positioniert relativ zum Viewport.
Welches bedeutet es bleibt immer am selben Platz sogar wenn Bildlaufleisten(scrollbars) vorhanden sind.
Die top, right, bottom, and left Eigenschaften werden verwendet zum positionieren des Elementes.
<!DOCTYPE html>
<html>
<head>
<style>
#fixedButton {
position: fixed;
width: 50%;
right: 10%;
top: 35%;
height: 8%;
}
@media screen and (max-width: 1024px) {
#fixedButton {
width: 80%;
right: 7.75%;
top: 40%;
height: 8%;
}
}
@media screen and (max-width: 568px) {
#fixedButton {
top: 35%;
height: 5%;
}
}
</style>
</head>
<body>
<div class="output" id="fixedButton">
<h2>position: fixed;</h2>
<p>Ein Element mit position: fixed; ist positioniert relativ zum Viewport. Welches bedeutet es bleibt immer am selben Platz sogar wenn Bildlaufleisten(scrollbars) vorhanden sind.</p>
margin: auto; border-radius: 5px;" onclick="document.location = 'CSS-position.htm#div_id3'">zurück zum Skript-Beispiel !!!</button>
</div>
</body>
</html>
position: absolute;
Für den Bezugspunkt der Positionierung gibt es 2 Möglichkeiten:
Das Element, das absolut positioniert wird, steht nicht in einem positionierten Element: Dann ist das Browserfenster der Bezugspunkt.
Das Element, das absolute positioniert wird, steht in einem ebenfalls positionierten Element, dann bildet dieses den Bezugspunkt für die Positionierung.
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid grey;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid grey;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>Das Element, das absolut positioniert wird, steht nicht in einem positionierten Element: Dann ist das Browserfenster der Bezugspunkt.Das Element, das absolute positioniert wird, steht in einem ebenfalls positionierten Element, dann bildet dieses den Bezugspunkt für die Positionierung.</p>
<div class="relative">Diese div Element wird positioniert mit position: relative;
<div class="absolute">Diese div Element wird positioniert mit position: absolute;
</div>
</div>
</body>
</html>
position: sticky;
Ein Element mit position: sticky; wird basierend auf der Bildlaufposition des Benutzers positioniert.
Ein sticky Element wird dargestellt zwischen relative und fixed, abhängig von der Scroll-Position.
Bei einer Webseite scrollt das Element erstmal mit, doch dann, wenn sie am oberen Rand des Browserfenster angekommen,
bleibt sie stehen und das auch beim weiteren scrollen.
<!DOCTYPE html>
<html>
<head>
<style>
button.fixed {
position: -webkit-sticky;
position: sticky;
top: 0px;
right: 30%;
}
</style>
</head>
<body>
<h3>Versuch zu scrollen innerhalb des Rahmen(frame) um zu verstehen wie sticky Positionierung funktioniert.</h3>
margin: auto; border-radius: 5px;" onclick="document.location = 'CSS-position.htm#div_id2'">zurück zum Skript-Beispiel !!!</button>
<h2>position: sticky;</h2>
<p>Ein Element mit position: fixed; ist positioniert relativ zum Viewport. Welches bedeutet es bleibt immer am selben Platz sogar wenn Bildlaufleisten(scrollbars) vorhanden sind.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
