z-index
Оновлено: 15.12.2022
z-index
Будь-які позиціоновані елементи на веб-сторінці можуть накладатися один на одного в певному порядку, імітуючи тим самим третій вимір, перпендикулярний до екрана. Кожен елемент може розташовуватися як нижче, так і вище за інші об'єкти веб-сторінки, їхнім розміщенням за z-віссю і керує z-index. Ця властивість працює тільки для елементів, у яких значення position задано як absolute, fixed або relative.
Коротка інформація
| Значення за замовчуванням | auto |
|---|---|
| Успадковується | Ні |
| Застосовується | До позиціонованих елементів |
| Анімується | Так |
Синтаксис
z-index: <число> | auto
Значення
Як значення використовуються цілі числа (позитивні, негативні та нуль). Що більше значення, то вище розташований елемент порівняно з тими елементами, у яких воно менше. За рівного значення z-index, на передньому плані перебуває той елемент, який у коді HTML описано нижче. Допустимо використовувати від'ємне значення.
Крім числових значень застосовується auto - порядок елементів у цьому разі будується автоматично, виходячи з їхнього положення в коді HTML і приналежності до батьківського елемента, оскільки дочірні елементи мають такий самий номер, що й їхній батьківський елемент.
Приклад
Об'єктна модель
Об'єкт.style.zIndex
Примітка
Список, створений за допомогою <select>, у браузері Internet Explorer до версії 6.0 включно завжди відображається поверх інших елементів, незважаючи на значення z-index.
Internet Explorer до версії 7.0 включно інтерпретує auto як 0.
У браузері Firefox до версії 2.0 включно від'ємне значення z-index розташовує елемент нижче від фону веб-сторінки та його контенту.