Apsolutno pozicioniranje elemenata u CSS

U ovoj lekciji ćemo analizirati apsolutno pozicioniranje elemenata. Ono omogućava pozicioniranje elemenata prema zadanim koordinatama stranice. Na primer, možemo pozicionirati element na udaljenosti od 100px od vrha stranice i 200px od leve strane. Element će se pomeriti tamo, bez obzira na to šta se tamo nalazi, i jednostavno će se postaviti iznad njih. Kaže se da pri tome element ispada iz normalnog toka dokumenta: svi ostali elementi će se ponašati kao da našeg elementa nema.

Da bi element bio apsolutno pozicioniran, tom elementu je potrebno postaviti svojstvo position na vrednost absolute. Pored ovog svojstva, potrebna su još dva: jedno će zadavati koordinatu po vertikali, a drugo - po horizontali.

Za vertikalu je potrebno zadati odstojanje ili od vrha, ili od dna. Odstojanje od vrha zadaje svojstvo top, a odstojanje od dna - svojstvo bottom. Za horizontalu je potrebno zadati odstojanje ili sa leve, ili sa desne strane. Odstojanje sa leve strane zadaje svojstvo left, a odstojanje sa desne strane - svojstvo right.

Pogledajmo na primerima.

Primer

Za početak, napravimo dva bloka bez pozicioniranja (obratite pažnju na to da elementi nisu prikliješteni za ivice prozora, pošto body ima podrazumevani 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

Sada ćemo zelenom bloku dodeliti apsolutno pozicioniranje, postavljajući ga na poziciju od 150px od vrha i 100px od leve strane:

<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

Sada ćemo postaviti zeleni blok na poziciju 0px od vrha i 0px od leve strane:

<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

Sada ćemo postaviti zeleni blok na poziciju 0px od vrha i 0px od desne strane:

<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

Sada ćemo postaviti zeleni blok na poziciju 0px od dna i 0px od desne strane:

<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

Sada ćemo postaviti zeleni blok na poziciju 0px od dna i 0px od leve strane:

<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čni zadaci

Koristeći apsolutno pozicioniranje, postavite blokove na sledeći način: