CSS-ում բացարձակ ծնողի նկատմամբ դիրքավորում

Նախորդ դասում մենք տեսանք, որ եթե ծնողին տալիս ենք relative, ապա նրա ժառանգները կդիրքավորվեն բացարձակապես նրա նկատմամբ: Սա ամենից հաճախ օգտագործվում է, երբ չեն ուզում, որ ծնողական տարրը դուրս գա նորմալ հոսքից:

Կարող է լինել նաև, որ ծնողին տրված է absolute: Այս դեպքում absolute ունեցող ժառանգները նույնպես կդիրքավորվեն նման ծնողի նկատմամբ, և ոչ թե դիտարկիչի պատուհանի նկատմամբ:

html<div id="parent">
  <div id="child"></div>
</div>
css#parent {
  position: absolute;
  top: 100px;
  left: 200px;
  
  width: 500px;
  height: 300px;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 0;
  left: 0;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Задание 1

Ստեղծեք քառակուսի բլոկ բացարձակ դիրքավորումով 400px չափսով: Նրա ներսում ստեղծեք ևս երկու բլոկ 50px չափսով: Տեղադրեք առաջին բլոկը ծնողի վերևի աջ անկյունում, իսկ երկրորդ բլոկը՝ ներքևի ձախ անկյունում: