Позиціонування відносно абсолютного батька в CSS

Позиціонування відносно абсолютного батька в CSS

У попередньому уроці ми розглянули, що елемент з position: relative може бути точкою відліку для дочірнього елемента з position: absolute.

Але батьківський елемент не обов'язково повинен мати relative. Елемент із position: absolute також може бути батьком для іншого абсолютного елемента.

У такому випадку дочірній елемент буде позиціонуватися відносно абсолютного батька, а не відносно вікна браузера.

Абсолютний батьківський елемент

Створимо батьківський блок з абсолютним позиціонуванням та дочірній блок всередині нього.

<div id="parent">
  <div id="child"></div>
</div>

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

Ланцюжок позиціонування

• Браузер шукає найближчого батька з position.
• Якщо знайдено relative, absolute або fixed — координати рахуються від нього.
• Якщо такого батька немає — позиціонування відбувається відносно сторінки.
• absolute може бути як дочірнім, так і батьківським елементом.

.card {
  position: absolute;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

Практичне завдання

.parent {
  position: absolute;
  width: 400px;
  height: 400px;
}

.child-one {
  position: absolute;
  top: 0;
  right: 0;
}

.child-two {
  position: absolute;
  bottom: 0;
  left: 0;
}