Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.
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 елементів поза цим елементем.
Формальний синтаксис
auto | <integer>
Приклади
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 |
| Media | visual |
| Computed value | as specified |
| Animation type | an integer |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
| Creates stacking context | yes |
Браузерна сумісність
Таблиця сумісності на цій сторінці створена за допомогою структурованих даних. Якщо хочеш зробити свій внесок до цих даних, звернися до сторінки https://github.com/mdn/browser-compat-data і вишли нам pull request.
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
z-index | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 4 | Opera Full support 4 | Safari Full support 1 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
| Negative values | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3 | IE Full support 4 | Opera Full support 4 | Safari Full support 1 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
Дивись також
- Властивість CSS
position - Зрозуміти CSS z-index