| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||
| 6.0+ | 8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ |
Коротка інформація
| Значення за замовчуванням | авто |
|---|---|
| Наслідується | Ні |
| Застосовується | До будь-яких позиціонованих елементів |
| Посилання на специфікацію | http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Позиціоновані елементи на веб-сторінці можуть накладатися один на одного, створюючи відчуття третього виміру, перпендикулярного екрану. Кожен елемент може бути вище або нижче інших об'єктів веб-сторінки, їх позицією по осі z керує z-index. Ця властивість працює тільки для елементів, у яких значення position задане як absolute, fixed або relative.
Синтаксис
z-index: число | авто | успадковується
Значення
Як значення використовуються цілі числа (позитивні, від'ємні та нуль). Чим більше значення, тим вище знаходиться елемент відносно інших елементів з меншим значенням. При рівних значеннях z-index, на передньому плані знаходиться той елемент, який в HTML-коді описаний нижче. Хоча специфікація й дозволяє використовувати від'ємні значення z-index, але такі елементи не відображаються в браузері Firefox до версії 2.0 включно.
Крім числових значень застосовується авто — порядок елементів у цьому випадку будується автоматично, виходячи з їх положення в HTML-коді та належності до батька, оскільки дочірні елементи мають той же номер, що їх батьківський елемент. Значення успадковується вказує на те, що воно успадковується від батька.
Приклад
HTML5CSS2.1ІECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index</title>
<style>
#layer1, #layer2, #layer3, #layer4 {
position: relative; /* Відносне позиціонування */
}
#layer1, #layer3 {
font-size: 50px; /* Розмір шрифту в пікселях */
color: #000080; /* Синій колір тексту */
}
#layer2, #layer4 {
top: -55px; /* Зсуваємо текст вгору */
left: 5px; /* Зсуваємо текст вправо */
color: #ffa500; /* Оранжевий колір тексту */
font-size:70px; /* Розмір шрифту в пікселях */
}
#layer1 { z-index: 2; }
#layer2 { z-index: 1; }
#layer3 { z-index: 3; }
#layer4 { z-index: 4; }
</style>
</head>
<body>
<p>Шар 1 зверху</p>
<div id="layer1">Шар 1</div>
<div id="layer2">Шар 2</div>
<p>Шар 4 зверху</p>
<div id="layer3">Шар 3</div>
<div id="layer4">Шар 4</div>
</body>
</html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Застосування властивості z-index
Об'єктна модель
[window.]document.getElementById("ідентифікатор елемента").style.zIndex
Браузери
Список, створений за допомогою тега <select>, в браузері Internet Explorer 6 завжди відображається поверх інших елементів, незважаючи на значення z-index.
Internet Explorer до версії 7.0 включно не підтримує значення успадковується і інтерпретує авто як 0.
У браузері Firefox до версії 2.0 включно від'ємне значення z-index розташовує елемент нижче фону веб-сторінки та її контенту.