z-index

Опис CSS властивості z-index:

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

Синтаксис CSS властивості z-index:

z-index: число | auto

Аргументи CSS властивості z-index:

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

Значення по замовчуванні CSS властивості z-index:

auto

Наслідування CSS властивості z-index:

не наслідується

Приклад використання CSS властивості z-index:

Слой 1 наверху <div style="position:relative; font-size:50px; z-index:2; color: navy">Слой 1</div> <div style="position:relative; top:-55; left:5; color:orange; font-size:70px; z-index:1">Слой 2</div> Слой 2 наверху <div style="position:relative; font-size:50px; z-index:3; color: navy">Слой 1</div> <div style="position:relative; top:-55; left:5; color:orange; font-size:70px; z-index:4">Слой 2</div>

Використання CSS властивості z-index:

До будь-яких позиційованим елементам.

Об'єктна модель CSS властивості z-index:

[window.]document.getElementById("elementID").style.zIndex

Додаткові відомості про CSS властивість z-index:

Список, створений за допомогою тега SELECT, в браузері Internet Exolorer завжди відображається поверх інших елементів, незважаючи на значення z-index. Тільки починаючи з версії 5.5, Internet Explorer допускає застосування атрибута z-index до фреймах (тег FRAME) і плаваючим фреймах (IFRAME). Браузер Netscape 4.x поля форм завжди відображає поверх всіх інших елементів веб-сторінки, незалежно від заданого z-index.