Pozicionimi Relativ i Elementeve në CSS

Pozicionimi relativ vendoset duke përdorur vlerën relative për vetinë position. Ky lloj pozicionimi lejon zhvendosjen e elementeve në lidhje me pozicionin e tyre aktual në një masë të caktuar. Në këtë rast të gjithë elementët e tjerë të faqes do të mendojnë se elementi ndodhet aty ku ishte fillimisht. Domethënë, me këtë lloj pozicionimi, elementi nuk largohet nga rrjedha normale.

Kompesimet nga pozicioni aktual përcaktohen nga vetitë top, right, bottom dhe left.

Shembull

Për fillim, le të krijojmë thjesht dy blloqe pa pozicionim:

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

Shembull

Tani le t'i shtojmë bllokut të parë relative. Kjo për momentin nuk do të ndryshojë asgjë, pasi ne nuk kemi specifikuar zhvendosjen e bllokut:

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

Shembull

Tani le ta zhvendosim bllokun tonë 30px nga lart, duke i caktuar vetinë top. Duke bërë kështu, të gjithë elementët e tjerë do të sillen sikur blloku ynë ka mbetur aty ku ishte fillimisht:

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

Shembull

Le ta zhvendosim gjithashtu bllokun tonë 40px nga e majta, duke i caktuar vetinë 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;
}

Shembull

Vlerat negative të vetive top, right, bottom dhe left zhvendosin në drejtim të kundërt. Për shembull, vlera pozitive e top zhvendos poshtë, ndërsa negative - lart.

Le ta zhvendosim bllokun tonë të dytë 40px lart, duke i caktuar një vlerë negative të vetisë 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;
}

Detyra praktike

Janë dhënë blloqet e mëposhtme:

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

Zhvendosni këto blloqe duke përdorur pozicionimin relativ sipas mënyrës së mëposhtme: