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

Практикалык тапшырмалар

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