Elementide absoluutne positsioneerimine CSS-is

Selles õppetükis analüüsime elementide absoluutset positsioneerimist. See võimaldab paigutada elemendid lehe määratud koordinaatidele. Näiteks saab elemendi paigutada positsiooni 100px lehe ülalt ja 200px vasakult. Element liigub sinna, sõltumata sellest, mis kohal teised elemendid asuvad, ja asetub nende peale. Öeldakse, et sel juhul väljub element dokumendi tavalisest voost: kõik ülejäänud elemendid käituvad nii, nagu meie elementi poleks.

Selleks, et teha element absoluutselt positsioneeritud, tuleb sellele elemendile määrata omadus position väärtusega absolute. Lisaks sellele omadusele on vaja kahte muud: üks määrab koordinaadi vertikaalsuunas ja teine - horisontaalsuunas.

Vertikaali jaoks tuleb määrata taane ülalt või alt. Taane ülalt määrab omadus top ja taane alt - omadus bottom. Horisontaali jaoks tuleb määrata taane vasakult või paremalt. Taane vasakult määrab omadus left ja taane paremalt - omadus right.

Vaatame näidete varal.

Näide

Alustuseks teeme lihtsalt kaks plokki ilma positsioneerimiseta (pange tähele, et elemendid ei ole akna serva vastu surutud, kuna body-l on vaikimisi 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;
}

Näide

Paneme nüüd rohelisele plokile absoluutse positsioneerimise, asetades selle positsiooni ülalt 150px ja vasakult 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;
}

Näide

Paneme nüüd rohelise ploki positsiooni 0px ülalt ja 0px vasakult:

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

Näide

Paneme nüüd rohelise ploki positsiooni 0px ülalt ja 0px paremalt:

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

Näide

Paneme nüüd rohelise ploki positsiooni 0px alt ja 0px paremalt:

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

Näide

Paneme nüüd rohelise ploki positsiooni 0px alt ja 0px vasakult:

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

Praktilised ülesanded

Kasutades absoluutset positsioneerimist, paigutage plokid järgmiselt: