CSS властивості
ГлавнаяВластивості CSSАтрибут z-index в CSS

Атрибут z-index в CSS

1109

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

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

Значення за замовчуванням auto
Успадковується Ні
Застосовується До позиціонованих елементів
Анімується Так

Синтаксис

<c ode>z-index: <число> | auto

Позначення

Опис Приклад
<тип> Вказує тип значення. <розмір>
A && B Значення повинні виводитися в зазначеному порядку. <розмір> && <колір>
A | B Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). normal | small-caps
A || B Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. width || count
[ ] Групує значення. [ crop || cross ]
* Повторювати нуль або більше разів. [,<час>]*
+ Повторювати один або більше разів. <число>+
? Вказаний тип, слово або група не є обов'язковим. inset?
{A, B} Повторювати не менше A, але не більше B разів. <радіус>{1,4}
# Повторювати один або більше разів через кому. <час>#

Значення

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

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

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Порядок карт</title> <style> .card { position: relative; } 
.three { top: 50px; left: 55px; z-index: 5; } 
.seven { left:-120px; top: 25px; z-index: 2;} 
.ace { left:-295px; z-index: 1; } 
.card:hover { z-index: 10; }
</style>
</head>
<body> <img src="image/3.png" alt="3" class="card three"> <img src="image/7.png" alt="7" class="card seven"> <img src="image/ace.png" alt="Туз" class="card ace">
</body>
</html>

У цьому прикладі при наведенні курсору на карту вона виходить на передній край, частково перекриваючи інші собою інші зображення (мал. 1).

Зміна порядку карт

Об'єктна модель

Об'єкт.style.zIndex

Примітка

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

>

Internet Explorer до версії 7.0 включно інтерпретує auto як 0.

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

Специфікація

Специфікація Статус
CSS Level 2 Revision 1 (CSS 2.1) Рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

  • Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
  • Candidate Recommendation (Можлива рекомендація ) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
  • Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
  • Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери

4 8 12 1 4 1 1 3
1 1 6 1

Браузери

У таблиці браузерів застосовуються такі позначення.