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>
текст текст текст

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

Осы блоктарды салыстырмалы позициялану көмегімен келесідей ығыстырыңыз: