Absolut positionering af elementer i CSS

I denne lektion vil vi analysere absolut positionering af elementer. Det giver mulighed for at placere elementer efter specificerede koordinater på siden. For eksempel kan du placere et element i positionen 100px fra toppen af siden og 200px fra venstre. Elementet vil flytte sig derhen, uanset hvad andre elementer der vil være placeret, og vil simpelthen ligge ovenpå dem. Man siger, at elementet i dette tilfælde falder ud af det normale dokumentflow: alle de andre elementer vil opføre sig, som om vores element ikke er der.

For at gøre et element absolut positioneret, er det nødvendigt at give dette element egenskaben position med værdien absolute. Udover denne egenskab, er der brug for yderligere to: den ene vil angive koordinaten for lodret, og den anden - for vandret.

For lodret skal du angive afstand enten fra toppen, eller fra bunden. Afstand fra toppen angives med egenskaben top, og afstand fra bunden - med egenskaben bottom. For vandret skal du angive afstand enten fra venstre, eller fra højre. Afstand fra venstre angives med egenskaben left, og afstand fra højre - med egenskaben right.

Lad os se på nogle eksempler.

Eksempel

Lad os først simpelthen lave to blokke uden positionering (vær opmærksom på, at elementerne ikke er trykket op til kanten af vinduet, da body har margin som standard):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Eksempel

Lad os nu give den grønne blok absolut positionering ved at placere den i positionen fra toppen 150px og fra venstre 100px:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Eksempel

Lad os nu placere den grønne blok i positionen 0px fra toppen og 0px fra venstre:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Eksempel

Lad os nu placere den grønne blok i positionen 0px fra toppen og 0px fra højre:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Eksempel

Lad os nu placere den grønne blok i positionen 0px fra bunden og 0px fra højre:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Eksempel

Lad os nu placere den grønne blok i positionen 0px fra bunden og 0px fra venstre:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Praktiske opgaver

Brug absolut positionering til at placere blokkene på følgende måde: