Relatyvusis elementų pozicionavimas CSS

Relatyvusis pozicionavimas nustatomas naudojant reikšmę relative savybei position. Šis pozicionavimo tipas leidžia postumti elementus nuo jų dabartinės padėties nurodytu atstumu. Tuo pat metu visi kiti puslapio elementai "matys" elementą toje pačioje vietoje, kur jis buvo iš pradžių. Tai reiškia, kad su šiuo pozicionavimo tipu elementas nepakrenta iš normalaus srauto.

Postūmiai nuo dabartinės padėties nustatomi savybėmis top, right, bottom ir left.

Pavyzdys

Pirmiausia tiesiog sukurkime du blokus be jokio pozicionavimo:

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

Pavyzdys

Dabar pridėkime pirmajam blokui relative. Kol kas niekas nepasikeis, nes nenurodėme bloko postūmio:

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

Pavyzdys

Dabar pastumkime mūsų bloką 30px nuo viršaus, nurodydami savybę top. Tuo metu visi kiti elementai elgsis taip, tarsi mūsų blokas liktų toje vietoje, kur buvo iš pradžių:

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

Pavyzdys

Taip pat pastumkime mūsų bloką 40px nuo kairės, nurodydami jam savybę 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;
}

Pavyzdys

Neigiamos savybių top, right, bottom ir left reikšmės pastumia priešinga kryptimi. Pavyzdžiui, teigiama reikšmė top pastumia žemyn, o neigiama - aukštyn.

Pastumkime mūsų antrąjį bloką 40px į viršų, nurodydami jam neigiamą reikšmę savybės 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;
}

Praktinės užduotys

Duoti šie blokai:

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

Pastumkite šiuos blokus naudodami relatyvųjį pozicionavimą taip: