ელემენტების ფარდობითი პოზიციონირება CSS-ში

ფარდობითი პოზიციონირება დაყენებულია მნიშვნელობით relative თვისებისთვის position. ასეთი პოზიციონირება საშუალებას აძლევს ელემენტები გადაადგილდნენ თავიანთი მიმდინარე მდებარეობიდან მოცემული სიდიდით. ამ შემთხვევაში გვერდის ყველა დანარჩენი ელემენტი იფიქრებს, რომ ელემენტი იმ ადგილას დგას, სადაც თავიდან იდგა. ანუ ამ ტიპის პოზიციონირებისას ელემენტი არ გამოდის ნორმალური ნაკადიდან.

გადაადგილებები მიმდინარე მდებარეობიდან დაყენებულია თვისებებით top, right, bottom და left.

მაგალითი

დასაწყისისთვის უბრალოდ გავაკეთოთ ორი ბლოკი პოზიციონირების გარეშე:

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

მაგალითი

ახლა დავამატოთ პირველ ბლოკს relative. ამით ჯერ-ჯერობით არაფერი შეიცვლება, რადგან ჩვენ არ დავუმატეთ ბლოკის გადაადგილება:

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

მაგალითი

ახლა გადავაადგილოთ ჩვენი ბლოკი 30px-ით ზემოდან, მივანიჭოთ მას თვისება top. ამ შემთხვევაში ყველა დანარჩენი ელემენტი იქნება ისე, როგორც ჩვენი ბლოკი დარჩა იმ ადგილას, სადაც თავიდან იდგა:

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

მაგალითი

ასევე გადავაადგილოთ ჩვენი ბლოკი 40px-ით მარცხნიდან, მივანიჭოთ მას თვისება 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;
}

მაგალითი

უარყოფითი მნიშვნელობები თვისებების top, right, bottom და left გადააადგილებს საპირისპირო მიმართულებით. მაგალითად, დადებითი მნიშვნელობა top გადააადგილებს ქვემოთ, ხოლო უარყოფითი - ზემოთ.

გადავაადგილოთ ჩვენი მეორე ბლოკი 40px-ით ზემოთ, მივანიჭოთ მას უარყოფითი მნიშვნელობა თვისების 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;
}

პრაქტიკული ამოცანები

მოცემულია შემდეგი ბლოკები:

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

გადაადგილეთ ეს ბლოკები ფარდობითი პოზიციონირების გამოყენებით შემდეგნაირად: