CSS властивість z-index
встановлює порядок осі Z спозицйонованого елементу, його нащадків або елементів з властивістю flex. Елементи з більшим z-index перекривають такі, в яких ця величина менша.
Вихідний код цього інтерактивного прикладу знаходиться в репозиторії GitHub. Якщо бажаєш зробити внесок до проекту інтерактивних прикладів, склонуй https://github.com/mdn/interactive-examples та вишли нам pull request.
В спозицйонованому елементі (такому, в якому властивість position
є будь-якою окрім static
) властивість z-index
вказує:
- Рівень накладання елемента в поточному контексті накладання.
- Чи створює цей елемент локальний контекст накладання.
Синтаксис
/* Властивість, зазначена ключовим словом */
z-index: auto;
/* Цифрові значення <integer> */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Цифри менше нуля зменьшують приорітет */
/* Глобальні значення */
z-index: inherit;
z-index: initial;
z-index: unset;
Властивість z-index
вказується або ключовим словом auto
або цифрою <integer>
.
Вартості
auto
- Контейнер не визначає нового локального контексту накладання. Рівень накладання створеного контейнеру в поточному контексті накладання є такий самий як і батьківський.
<integer>
<integer>
вказує рівень накладання створеного контейнеру в поточному контексті накладання. Контейнер також створює локальний контекст накладання в якому його рівень накладання дорівнює0
. Це означає що вартість z-index елементів-нащадків не порівнюється з z-index елементів поза цим елементем.
Формальний синтаксис
Приклади
HTML
<div class="dashed-box">Коробка з пунктиром
<span class="gold-box">Золота коробка</span>
<span class="green-box">Зелена коробка</span>
</div>
CSS
.dashed-box {
position: relative;
z-index: 1;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.gold-box {
position: absolute;
z-index: 3; /* розташуй .gold-box над .green-box та .dashed-box */
background: gold;
width: 80%;
left: 60px;
top: 3em;
}
.green-box {
position: absolute;
z-index: 2; /* розташуй .green-box над .dashed-box */
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 7em;
opacity: 0.9;
}
Результат
Специфікації
Специфікація | Статус | Коментар |
---|---|---|
CSS Transitions The definition of 'поводження анімації z-index' in that specification. |
Working Draft | Означає z-index як такий, який можна анімувати. |
CSS Level 2 (Revision 1) The definition of 'z-index' in that specification. |
Recommendation | Початкове визначення |
Initial value | auto |
---|---|
Applies to | positioned elements |
Inherited | no |
Computed value | as specified |
Animation type | an integer |
Creates stacking context | yes |
Браузерна сумісність
BCD tables only load in the browser
Таблиця сумісності на цій сторінці створена за допомогою структурованих даних. Якщо хочеш зробити свій внесок до цих даних, звернися до сторінки https://github.com/mdn/browser-compat-data і вишли нам pull request.
Дивись також
- Властивість CSS
position
- Зрозуміти CSS z-index