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

Գործնական առաջադրանքներ

Օգտագործելով բացարձակ դիրքավորումը՝ տեղադրեք բլոկները հետևյալ կերպ: