Посада - CSS-хитрощі | Альманах CSS 2025

positionВластивість може допомогти вам керувати розташування елемента, наприклад:

.element ( position: relative; top: 20px; )

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

relativeє лише одним із шести значень для positionвластивості. Ось інші:

Цінності

static: кожен елемент має статичне положення за замовчуванням, тому елемент буде дотримуватися звичайного потоку сторінок. Отже, якщо встановлено лівий / правий / верхній / нижній / z-індекс, то це не вплине на цей елемент.
relative: початкове положення елемента залишається в потоці документа, як і staticзначення. Але тепер буде працювати лівий / правий / верхній / нижній / z-індекс. Позиційні властивості "штовхають" елемент з початкового положення в цьому напрямку.
absolute: елемент вилучено з потоку документа, а інші елементи будуть поводитися так, ніби його навіть немає, тоді як усі інші позиційні властивості будуть працювати на ньому.
fixed: елемент вилучається із потоку документа як абсолютно позиціоновані елементи. Насправді вони поводяться майже однаково, лише фіксовані позиціоновані елементи завжди відносяться до документа, а не до будь-якого конкретного батька і на них не впливає прокрутка.
sticky(експериментально): елемент обробляється як relativeзначення, поки місце прокрутки області перегляду не досягне заданого порогу, в цей момент елемент займає fixedпозицію, де йому наказано дотримуватися.
inherit: positionзначення не каскадує, тому це може бути використано для спеціального примусу до нього та inheritзначення позиціонування від його батьківського елемента.

Абсолютна

Якщо дочірній елемент має absoluteзначення, тоді батьківський елемент буде поводитися так, ніби дочірнього елемента взагалі немає:

.element ( position: absolute; )

І коли ми намагаємося встановити інші значення , такі як left, bottomі rightми знайдемо , що дочірній елемент реагує не на розміри свого батька, але документ:

.element ( position: absolute; left: 0; right: 0; bottom: 0; )

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

.parent ( position: relative; )

Тепер властивості , такі як left, right, bottomі topбуде ставитися до батьківського елементу, так що , якщо ми робимо дочірній елемент прозорий , ми можемо бачити , що сидить на дні батька:

Виправлено

fixedЗначення аналогічно , absoluteяк це може допомогти вам позиціонувати елемент в будь-якому місці щодо документа, проте це значення не залежить від прокрутки. Подивіться дочірній елемент у демонстраційній демонстрації нижче та про те, як після прокрутки він продовжує триматися внизу сторінки:

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

Chrome	Firefox	IE	Край	Сафарі
4	2	7	12	3.1

Мобільний / планшетний

Android Chrome	Android Firefox	Android	iOS Safari
88	85	3	8

Липкий

stickyЗначення , як компроміс між relativeі fixedцінностями. На момент написання цієї статті вона наразі є експериментальним значенням, тобто вона не є частиною офіційної специфікації та лише частково прийнята вибраними браузерами. Іншими словами, мабуть, це не найкраща ідея використовувати це на веб-сайті, що працює в режимі реального часу.

Що це робить? Ну, це дозволяє вам розташувати елемент відносно будь-чого в документі, а потім, як тільки користувач прокрутить певну точку у вікні перегляду, зафіксуйте позицію елемента в цьому місці, щоб він постійно відображався як елемент із fixedзначення.

Візьмемо такий приклад:

.element ( position: sticky; top: 50px; )

Елемент буде розташовуватися відносно, поки місце прокрутки області перегляду не досягне точки, де елемент буде знаходитися 50pxзверху області перегляду. В той момент, елемент стає липким і залишається в fixedположенні 50pxверхньої частини екрану.

Наступна демонстрація ілюструє цю точку, де верхня навігація є relativeпозиціонуванням за замовчуванням, а друга навігація встановлена stickyна самий верх вікна перегляду. Зверніть увагу, що демонстрація буде працювати лише в Chrome, Safari та Opera на момент написання цієї статті.