CSS-те элементтердің абсолюттік позициялауы

Бұл сабақта біз элементтердің абсолюттік позициялауын талдаймыз. Бол элементтерді беттің көрсетілген координаттары бойынша орналастыруға мүмкіндік береді. Мысалы, элементті беттің жоғарғы жағынан 100px және сол жағынан 200px позициясына орналастыруға болады. Элемент сонда көшеді, онда басқа элементтер орналасса да және олардың үстіне шығады. Бұл жағдайда элемент құжаттың қалыпты ағынынан шығады деп айтылады: барлық басқа элементтер біздің элемент жоқ сияқты әрекет етеді.

Элементті абсолюттік позициялау үшін, осы элементке position сипатын absolute мәнінде беру керек. Бұл сипаттан басқа, тағы екеуі қажет: біреуі тік бойынша координатаны береді, ал екіншісі - көлденең бойынша.

Тік бойынша жоғарғы жағынан немесе төменгі жағынан шегініс беру керек. Жоғарғы жағынан шегініс top сипаты арқылы беріледі, ал төменгі жағынан шегініс - bottom сипаты арқылы. Көлденең бойынша сол жағынан немесе оң жағынан шегініс беру керек. Сол жағынан шегініс left сипаты арқылы беріледі, ал оң жағынан шегініс - right сипаты арқылы.

Мысалдарды қарастырайық.

Мысал

Алдымен позициялаусыз екі блок жасайық (элементтер терезе жиегіне жабыспағанына назар аударыңыз, себебі body әдепкі бойынша margin-ге ие):

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

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

Мысал

Енді жасыл блокқа абсолюттік позициялау беріп, оны жоғарғы жағынан 150px және сол жағынан 100px позициясына қояйық:

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

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

Мысал

Енді жасыл блокты жоғарғы жағынан 0px және сол жағынан 0px позициясына қояйық:

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

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

Мысал

Енді жасыл блокты жоғарғы жағынан 0px және оң жағынан 0px позициясына қояйық:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Мысал

Енді жасыл блокты төменгі жағынан 0px және оң жағынан 0px позициясына қояйық:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Мысал

Енді жасыл блокты төменгі жағынан 0px және сол жағынан 0px позициясына қояйық:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Практикалық тапсырмалар

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