# z - index

/Internet Explorer | /Netscape | /Opera | /Safari | /Firefox
6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0
Помилки | Помилки | Так | Так | Так | Так | Так | Так | Так | Так | Так | Помилки | Помилки | Так

## Коротка інформація

CSS | CSS2
Значення за умовчанням | auto
Наслідує | Ні
Застосовується | До будь-яких елементів, що позиціонуються
Аналог HTML | Ні
Посилання на специфікацію | http://www.w 3.org/TR/CSS21/visuren.html#propdef - z - index

### Опис

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

### Синтаксис

z - index: число | auto | inherit

### Значення

В якості значення використовуються цілі числа (позитивні, негативні і нуль). Чим більше значення, тим вище знаходиться елемент в порівнянні з тими елементами, у яких воно менше. При рівному значенні z - index, на передньому плані знаходиться той елемент, який в коді HTML описаний нижче. Хоча специфікація і дозволяє використовувати негативні значення z - index, але такі елементи не відображаються у браузерах Netscape і Firefox до версії 2.0 включно.

Окрім числових значень застосовується auto - порядок елементів в цьому випадку будується автоматично, виходячи з їх положення в коді HTML і приналежності до батька, оскільки дочірні елементи мають той же номер, що їх батьківський елемент. Значення inherit вказує, що воно наслідує у батька.

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

    <html>

      <head>

        <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

        <title>z - index</title>

        <style type="text/css">

          #layer1, #layer2, #layer3, #layer4 {

            position: relative; /* Відносне позиціонування */

          }

          #layer1, #layer3 {

            font - size: 50px; /* Розмір шрифту в пікселах */

            color: #000080; /* Синій колір тексту */

          }

          #layer2, #layer4 {

            top: - 55px; /* Зрушуємо текст вверх */

            left: 5px; /* Зрушуємо текст управо */

            color: #ffa500; /* Помаранчевий колір тексту */

            font - size :70 px;  /* Розмір шрифту в пікселах */

          }

          #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("elementID").style.zIndex

### Браузери

Список, створений за допомогою тега <SELECT>, у браузері Internet Explorer 6 завжди відображається поверх інших елементів, незважаючи на значення z - index.

Internet Explorer до сьомої версії включно не підтримує значення inherit і інтерпретує auto як 0.

У браузері Firefox до версії 2.0 включно негативне значення z - index розташовувало елемент розташовує елемент нижче за фон веб-сторінки і його контенту.