Eigenschaft position

Die Eigenschaft position legt die Art der Positionierung von Elementen fest. Diese Eigenschaft wird am häufigsten zusammen mit den Eigenschaften top, right, bottom, left verwendet, die den Abstand von oben, rechts, unten bzw. links festlegen.

Syntax

Selektor {
	position: absolute | relative | fixed | static | sticky;
}

Werte für position

Wert	Beschreibung
`absolute`	Absolute Positionierung. Das Element wird aus dem normalen Dokumentfluss entfernt und relativ zum nächsten positionierten Elternelement (falls vorhanden) oder relativ zum Browserfenster positioniert.
`relative`	Relative Positionierung. Das Element wird relativ zu seiner normalen Position im Dokumentfluss verschoben, aber der Platz, den es eingenommen hat, bleibt reserviert.
`fixed`	Feste Positionierung. Das Element wird aus dem normalen Dokumentfluss entfernt und relativ zum Browserfenster positioniert. Es bleibt beim Scrollen der Seite an seiner Position.
`static`	Statische Positionierung. Der Wert bedeutet, dass keine Positionierung angewendet wird und das Element verhält sich wie üblich.
`sticky`	"Haftende" (Sticky) Positionierung. Das Element verhält sich wie `relative`, bis es beim Scrollen eine bestimmte Position erreicht, an der es dann haften bleibt (wie `fixed`).

Standardwert: static.

Beispiel . Absolute Positionierung

Platzieren wir ein Element in der oberen linken Ecke des Bildschirms mit kleinen Abständen:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Beispiel . Absolute Positionierung

Und jetzt platzieren wir ein Element in der oberen rechten Ecke des Bildschirms mit kleinen Abständen:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Beispiel . Feste Positionierung

Bei fester Positionierung bleibt das Element beim Scrollen an seiner Position:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Beispiel . Relative Positionierung

Bei relativer Positionierung wird das Element relativ zu seiner normalen Position verschoben, aber andere Elemente verhalten sich so, als ob das Element nicht verschoben worden wäre:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

Beispiel . Verschachtelung

Wenn das Elternelement die Eigenschaft position mit dem Wert relative hat, dann werden absolut positionierte Elemente relativ zum Elternelement positioniert:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Beispiel . Verschachtelung

Wenn das Elternelement die Eigenschaft position mit dem Wert absolute hat, dann werden absolut positionierte Elemente relativ zum Elternelement positioniert:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Beispiel . Haftende (Sticky) Positionierung

Wenn für ein Element die Eigenschaft position den Wert sticky hat, dann verhält sich das Element wie relative, bis es beim Scrollen eine bestimmte Position erreicht, an der es dann haften bleibt. Lassen Sie uns einen haftenden Header erstellen:

<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

Beispiel . Ohne Position

Wenn einem Element eine absolute Positionierung zugewiesen wird, ohne die Position anzugeben, bleibt das Element an der Stelle stehen, an der es ohne Positionierung stand, aber andere Elemente werden es nicht mehr wahrnehmen:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Beispiel . Eine Achse

Bei absoluter Positionierung kann die Position nur entlang einer Achse angegeben werden. Wenn wir beispielsweise die Eigenschaft top festlegen, wird das Element vertikal an die gewünschte Position gesetzt, bleibt aber horizontal dort stehen, wo es war:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Beispiel . Alle Positionen

Bei absoluter Positionierung können Positionen von allen Seiten festgelegt werden, ohne Breite und Höhe anzugeben. In diesem Fall wird das Element in der Mitte des übergeordneten Blocks zentriert:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

Siehe auch

die Eigenschaft z-index,
die die Überlagerung von Elementen festlegt