Die Eigenschaft position: gibt die Art der Methode zu der Positionierung an, welche für ein Element verwendet wird (static, relative, fixed, absolute oder sticky).
position: static;
HTML Elemente werden standardmäßig als static definiert.
Statisch positionierte Objekte werden nicht durch die Angabe top, bottom, left oder right Eigenschaften beeinflusst.
Beispiel 1
div.static {
position: static;
border: 2px dotted #73AD21;
width: 300px;
}position: relative;
Ein Element mit der Angabe position: relative; wird relativ zu seiner normalen Position positioniert ist. Das Festlegen der oberen, rechten, unteren und linken Eigenschaften eines relativ positionierten Elements führt dazu, dass es von seiner normalen Position ausgehend verschoben werden kann. Andere Inhalte werden nicht angepasst, um die Lücke zu füllen, die das Element hinterlassen hat.
Beispiel 2
div.relative {
position: relative;
left: 30px;
border: 2px solid #11AA11;
width: 300px;
}position: fixed;
position: fixed; positioniert ein Objekt relativ zum Ansichtsfenster, folge dessen bleibt immer an der gleichen Stelle, auch wenn die Browserseite gescrollt wird. Die Eigenschaften top, right, bottom und left können verwendet werden, um das Element an die gewollte Stelle zu legen. Ein festes Element hinterlässt keine freie Stelle auf dem Platz, wo es sich befand.
Beispiel 3
div.fixed {
position: fixed;
top: 200px;
left: 250px;
width: 300px;
border: 2px inset #AA00BB;
}position: absolute;
position: absolute; wird relativ zum nächsten positionierten Vorfahren angeordnet. Hierbei können Überlagerungen (gewollt oder ungewollt) auftreten.
Wenn ein absolut positioniertes Element keine Vorfahren hat, verwendet es den Textkörper des Dokuments. Es bewegt sich beim Scrollen der Seite mit.
Beispiel 4
div.absolute {
position: absolute;
top: 400px;
left: 100px;
width: 300px;
border: 2px double #FF00AA;
}position: sticky;
position: sticky; platziert ein Objekt in Abhängigkeit der Position wie gescrollt wurde/wird.
EIn mit sticky positioniertes Objekt wechselt zwischen relative and fixed. Es verhält sich relative solange bis die Scrollposition es aus dem Bild schieben würde, ab dann fixed.
Beispiel 5
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #AAAAAA;
border: 2px groove #0000AA;
width: 300px;
}Hier noch kurz den HTML Code zu dem kleinen Beispielen.
<body>
<h2>position: sticky;</h2>
<div class="sticky">
Dieses Element besitzt eine sticky Position.
</div>
<h2>position: static;</h2>
<div class="static">
Dieses Element besitzt eine statische Position.
</div>
<h2>position: relative;</h2>
<div class="relative">
Dieses Element besitzt eine relative Position.
</div>
<h2>position: fixed;</h2>
<div class="fixed">
Dieses Element besitzt eine fixe Position.
</div>
<h2>position: absolute;</h2>
<div class="absolute">
Dieses Element besitzt eine absolute Position.
</div>
</body>