Absolutno pozicioniranje elementov v CSS

V tej lekciji bomo analizirali absolutno pozicioniranje elementov. Omogoča nameščanje elementov po določenih koordinatah strani. Na primer, element lahko postavimo v položaj 100px od vrha strani in 200px od levega roba. Element se bo premaknil tja, ne glede na to, kaj se tam nahaja, in se preprosto postavil nadnje. Rečemo, da pri tem element izpade iz normalnega toka dokumenta: vsi ostali elementi se bodo obnašali, kot da našega elementa ni.

Da naredimo element absolutno pozicioniran, mu moramo nastaviti lastnost position na vrednost absolute. Poleg te lastnosti potrebujemo še dve: ena bo določala koordinato po navpičnici, druga pa po vodoravnici.

Za navpičnico moramo nastaviti odmik od zgoraj ali od spodaj. Odmik od zgoraj določa lastnost top, odmik od spodaj pa lastnost bottom. Za vodoravnico moramo nastaviti odmik od leve ali od desne. Odmik od leve določa lastnost left, odmik od desne pa lastnost right.

Poglejmo si primere.

Primer

Za začetek naredimo dva bloka brez pozicioniranja (pozorni bodite na to, da elementi niso pritisnjeni na rob okna, saj ima body privzeto margin):

<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;
}

Primer

Zdaj zelenemu bloku določimo absolutno pozicioniranje tako, da ga postavimo na položaj od zgoraj 150px in od leve 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;
}

Primer

Zdaj postavimo zeleni blok na položaj 0px od zgoraj in 0px od leve:

<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;
}

Primer

Zdaj postavimo zeleni blok na položaj 0px od zgoraj in 0px od desne:

<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;
}

Primer

Zdaj postavimo zeleni blok na položaj 0px od spodaj in 0px od desne:

<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;
}

Primer

Zdaj postavimo zeleni blok na položaj 0px od spodaj in 0px od leve:

<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;
}

Praktične naloge

Z uporabo absolutnega pozicioniranja razporedite bloke na naslednji način: