Назад Вперед Зміст

Значення position: absolute

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

Властивості left і top

Для задання координат використовуються властивості left і top.

Координати задаються відносно лівого верхнього кута контейнера, тобто блоку, у якому міститься позиціонований елемент. Елементи позиціонуються відносно найближчого батьківського елемента, для якого задано позиціонування, відмінне від static. Якщо такого елемента немає, то елемент позиціюється відносно основного документа.

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

Приклад 1

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

1. Розмістили два блоки шириною і висотою 100 пікселів і вказали, що вони мають абсолютне позиціонування.
2. Для першого блоку вказали, що він зміщується від верхнього краю вікна на 3em, а від правого — на 50%.
3. Для другого блоку вказали, що він зміщується від нижнього краю вікна на 25%, а від лівого — на 40%.

Чому наші елементи позиціонуються відносно вікна браузера?

Елементи позиціонуватимуться відносно заданого краю предка лише у випадку, якщо їхній предок має властивість position, відмінну від static, інакше зміщення буде відносно краю вікна браузера.

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

1. Розмістили блок (елемент
   ), який має відносне позиціонування. Вказали для нього внутрішній відступ зверху (margin-top) 100 пікселів, задали ширину, висоту і колір фону.
2. Всередині нього розмістили блочний елемент (елемент
   ), який має висоту 100 пікселів і жовтий фон. Цей елемент має статичне позиціонування (значення за замовчуванням), оскільки властивість position не наслідується і він не успадкував від батьківського блоку відносне позиціонування.
3. Всередині контейнера зі статичним позиціонуванням розмістили елемент з абсолютним позиціонуванням. Вказали для нього ширину і висоту 50 пікселів і червоний фон (цей елемент позиціонується не відносно вікна браузера чи батьківського елемента зі статичним позиціонуванням, а відносно свого предка з позиціонуванням, відмінним від static).

У результаті наш елемент розміщений у верхньому правому куті свого предка з відносним позиціонуванням.

Якщо ви не вказуєте вертикальне положення елемента з абсолютним позиціонуванням (top або bottom), або горизонтальне положення (left або right), браузер залишить елемент у тому самому місці сторінки, де він знаходиться у звичайному потоці (елемент буде розміщений поверх вмісту, якщо він є).

Елемент з абсолютним позиціонуванням (position: absolute) позиціонується відносно заданого краю свого предка, при цьому предок повинен мати властивість position, відмінну від static, інакше відлік (зміщення) буде відносно краю вікна браузера.

Назад Вперед Зміст