Elementide suhteline positsioneerimine CSS-is

Suhteline positsioneerimine määratakse väärtusega relative omadusele position. Selline positsioneerimine võimaldab elemente nihutada nende praegusest asukohast antud suuruse võrra. Samas jäävad kõik teised lehe elemendid arvama, et element asub seal, kus see algselt asus. See tähendab, et seda tüüpi positsioneerimise korral ei välju element tavalisest voost.

Nihked praegusest asukohast määratakse omadustega top, right, bottom ja left.

Näide

Alustuseks teeme lihtsalt kaks plokki ilma positsioneerimiseta:

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

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

Näide

Lisame nüüd esimesele plokile relative. See ei muuda veel midagi, kuna me ei ole määranud ploki nihet:

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

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

Näide

Nüüd nihutame oma ploki 30px ülespoole, määrates sellele omaduse top. Sel juhul käituvad kõik teised elemendid nii, nagu meie plokk jääks sinna, kus see algselt asus:

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

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

Näide

Nihutame ka meie ploki 40px vasakule, määrates sellele omaduse left:

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

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

Näide

Omaduste top, right, bottom ja left negatiivsed väärtused nihutavad vastupidises suunas. Näiteks positiivne väärtus top nihutab alla, aga negatiivne - üles.

Nihutame oma teise ploki 40px ülespoole, määrates sellele negatiivse väärtuse omadusele top:

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

#elem1 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	position: relative;
	top: -40px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Praktilised ülesanded

Antud on järgmised plokid:

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

#elem1 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #FF8888;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #7E89EB;
}
#elem3 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #4DEE99;
}

Nihutage neid plokke suhtelise positsioneerimise abil järgmiselt: