| 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 + |
Коротка інформація
| Значення за умовчанням | auto |
|---|---|
| Успадковується | ет |
| Застосовується | До будь-яких позиційованим елементів |
| Посилання на специфікацію | 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: число | auto | inherit
Значення
В якості значення використовуються цілі числа (позитивні, негативні і нуль). Чим більше значення, тим вище знаходиться елемент в порівнянні з тими елементами, у яких воно менше. При рівному значенні z-index, на передньому плані знаходиться той елемент, який в коді HTML описаний нижче. Хоча специфікація і дозволяє використовувати негативні значення z-index, але такі елементи не відображаються в браузері Firefox до версії 2.0 включно.
Крім числових значень застосовується auto — порядок елементів в цьому випадку будується автоматично, виходячи з їхнього економічного становища в коді HTML і приналежності до батькові чи матері, оскільки дочірні елементи мають той же номер, що їх батьківський елемент. Значення inherit вказує, що воно успадковується у батька.
Приклад
HTML5 CSS2.1 IE Cr Op Sa Fx
<!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.
Об'єктна модель
[window.] Document.getElementById (" elementID "). style.zIndex
Браузери
Список, створений за допомогою тега <select> , в браузері Internet Explorer 6 завжди відображається поверх інших елементів, незважаючи на значення z-index .
Internet Explorer до версії 7.0 включно не підтримує значення inherit і інтерпретує auto як 0.
У браузері Firefox до версії 2.0 включно від'ємне значення z-index має елемент нижче фону веб-сторінки і його контенту.