Absolutt posisjonering av elementer i CSS

I denne leksjonen skal vi gå gjennom absolutt posisjonering av elementer. Det tillater plassering av elementer etter angitte koordinater på siden. For eksempel kan du plassere et element i posisjon 100px fra toppen av siden og 200px fra venstre. Elementet vil flytte seg dit, uten å ta hensyn til hva som vil være plassert der og vil bare legge seg over andre elementer. Det sies at elementet faller ut av normal flyt i dokumentet: alle andre elementer vil oppføre seg som om vårt element ikke er der.

For å gjøre et element absolutt posisjonert, må elementet ha egenskapen position satt til verdien absolute. I tillegg til denne egenskapen, trengs to til: én vil angi koordinaten for vertikalen, og den andre - for horisontalen.

For vertikalen må du angi avstand enten fra toppen, eller fra bunnen. Avstand fra toppen angis med egenskapen top, og avstand fra bunnen - med egenskapen bottom. For horisontalen må du angi avstand enten fra venstre, eller fra høyre. Avstand fra venstre angis med egenskapen left, og avstand fra høyre - med egenskapen right.

La oss se på eksempler.

Eksempel

La oss først bare lage to blokker uten posisjonering (legg merke til at elementene ikke er presset til kanten av vinduet, siden 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

La oss nå gi den grønne blokken absolutt posisjonering ved å plassere den i posisjon 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

La oss nå plassere den grønne blokken i posisjon 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

La oss nå plassere den grønne blokken i posisjon 0px fra toppen og 0px fra høyre:

<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

La oss nå plassere den grønne blokken i posisjon 0px fra bunnen og 0px fra høyre:

<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

La oss nå plassere den grønne blokken i posisjon 0px fra bunnen 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 oppgaver

Bruk absolutt posisjonering for å plassere blokkene som følger: