Що робить position: absolute?
position: absolute повністю видаляє елемент із нормального потоку і дозволяє розміщувати його за координатами (top, right, bottom, left) відносно найближчого позиціонованого предка. Якщо позиціонованого предка немає, орієнтиром стає вся сторінка (viewport body/html).
Основні ефекти
- елемент не займає місця в потоці: сусідні блоки поводяться так, ніби його не існує;
- можна точно задати позицію за допомогою координат;
- ширина і висота типово підлаштовуються під вміст (як у
inline-block); - елемент накладається поверх інших, беручи участь у шаруватості (можна керувати
z-index).
Приклад:
css
.parent {
position: relative;
}
.child {
position: absolute;
top: 20px;
left: 30px;
}Тут .child буде позиціонуватися відносно .parent.
Підсумок: absolute - це режим, при якому елемент виключається з потоку і позиціонується точно за координатами відносно позиціонованого контейнера.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.