CSS-ում էլեմենտների բացարձակ դիրքավորում

Այս դասում մենք կվերլուծենք էլեմենտների բացարձակ դիրքավորումը: Այն թույլ է տալիս տեղակայել էլեմենտները էջի նշված կոորդինատներով: Օրինակ, կարելի է տեղադրել էլեմենտ էջի վերևից 100px և ձախից 200px դիրքում: Էլեմենտը կտեղափոխվի այնտեղ, անկախ նրանից, թե ինչ այլ էլեմենտներ կլինեն այնտեղ և պարզապես կդրվի նրանց վրա: Ասում են, որ այս դեպքում էլեմենտը դուրս է գալիս նորմալ հոսքից փաստաթղթի: Բոլոր մնացած էլեմենտները կվարվեն այնպես, կարծես մեր էլեմենտը չկա:

Որպեսզի էլեմենտը դարձնել բացարձակ դիրքավորված, այդ էլեմենտին անհրաժեշտ է տալ position հատկությունը արժեքով absolute: Բացի այս հատկությունից, անհրաժեշտ են ևս երկուսը՝ մեկը կնշի ուղղահայաց կոորդինատը, իսկ երկրորդը՝ հորիզոնական:

Ուղղահայացի համար անհրաժեշտ է նշել բացը կամ վերևից, կամ ներքևից: Վերևից բացը նշվում է top հատկությամբ, իսկ ներքևից բացը՝ bottom հատկությամբ: Հորիզոնականի համար անհրաժեշտ է նշել բացը կամ ձախից, կամ աջից: Ձախից բացը նշվում է left հատկությամբ, իսկ աջից բացը՝ right հատկությամբ:

Դիտարկենք օրինակներով:

Օրինակ

Սկսելու համար եկեք պարզապես ստեղծենք երկու բլոկ առանց դիրքավորման (ուշադրություն դարձրեք, որ էլեմենտները չեն սեղմվում պատուհանի եզրին, քանի որ body-ն լռելյայն ունի margin):

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

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

Результат:

Օրինակ

Եկեք այժմ կանաչ բլոկին տանք բացարձակ դիրքավորում՝ տեղադրելով այն դիրքում վերևից 150px և ձախից 100px:

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

css#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 ձախից:

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

css#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 աջից:

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

css#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 աջից:

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

css#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 ձախից:

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

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

Результат:

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