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

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

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

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

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів