css властивість z-index

Властивість z-index визначає порядок стека елемента. Іншими словами, Ви можете розмістити елемент на сторінці вище іншого елементу або перед ним.

Властивість `z-index`

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

Де саме буде перебувати елемент відносно інших елементів, задається за допомогою властивості z-index.

Наприклад, елемент зі z-index, який дорівнює 300, показуватиметься ближче користувачеві, ніж елементі зі z-index, який дорівнює 200. Аналогічно, елемент зі значенням 50 ближче, ніж елемент зі значенням 20 тощо. Тобто чим вище значення z-index, тим вище він знаходиться відносно елементів із нижчим значенням заданим для цієї властивості.

Якщо цю властивість не чіпати, елементи будуть розташовані залежно від потоку: чим нижче у коді, тим елемент вище на сторінці. За допомогою z-index, можна штучно змінювати цю поведінку.

Властивість z-index може приймати два значення: ключове слово auto або число, яке означатиме рівень у потоці.

Нотатка:

Ця властивість працює тільки для елементів, у яких значення положення задано як absolute, relative або fixed (position:absolute, position:relative, position:fixed).

Синтаксис

z-index: auto|number|initial|inherit;

Властивість z-index може отримувати 4 значення:


auto: Встановлює порядок стека еквівалентно батьківським елементам. Це без задання

number: Встановлює порядок стека елемента. Дозволяється використовувати від'ємні значення.

initial: Встановлює властивість у значення без задання

inherit: Вказує на спадковість властивості від свого батьківського елемента

Значення без задання:	auto
Наслідує:	Ні
Анімується:	Так
JavaScript синтаксис:	object.style.zIndex="-1"

Переглядач
z-index	1.0	8.0	3.0	1.0	4.0

Переглядач
z-index	1.0	1.0	1.0

Мобільних переглядачів ще не додано.

Приклади

Динамічне редагування значення для властивості z-index

See the Pen <a href='https://codepen.io/MichaelBondar/pen/WEGadw/'>z-index-1</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Приклад роботи властивості

See the Pen <a href='https://codepen.io/MichaelBondar/pen/VzKEBR/'>z-index-2</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Демонстрація роботи властивості

See the Pen <a href='https://codepen.io/MichaelBondar/pen/xYwXVX/'>xYwXVX</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.

Динамічний приклад

See the Pen <a href='https://codepen.io/MichaelBondar/pen/BYowKe/'>BYowKe</a> by MichaelBondar (<a href='https://codepen.io/MichaelBondar'>@MichaelBondar</a>) on <a href='https://codepen.io'>CodePen</a>.