z-index

Властивість CSS z-index (індекс за аплікатою) задає аплікатний порядок позиціонованого елемента та його нащадків або гнучких і сіткових елементів. Накладання елементів з більшим значенням z-index закриває елементи з меншим значенням цієї властивості.

Спробуйте його в дії

Для позиціонованої рамки (тобто такої, що має position зі значенням, відмінним від static) властивість z-index задає:

1. Рівень накладання рамки в поточному контексті нагромадження.
2. Те, чи утворює рамка локальний контекст нагромадження.

Синтаксис

/* Значення – ключове слово */
z-index: auto;

/* Значення <integer> */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* Від'ємні значення – для нижчого пріоритету */

/* Глобальні значення */
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: revert-layer;
z-index: unset;

Властивість z-index задається або як ключове слово auto, або як <integer> (ціле число).

Значення

auto

Рамка не утворює нового локального контексту нагромадження. Рівень накладання породженої рамки в поточному контексті нагромадження – 0.

<integer>

Цей <integer> є рівнем накладання породженої рамки в поточному контексті нагромадження. Ця рамка також утворює локальний контекст нагромадження. Це означає, що значення z-index її нащадків – не порівнюються зі значеннями z-index елементів поза цим елементом.

Формальне визначення

Формальний синтаксис

auto | <integer>

Приклади

Візуальне нашарування елементів

HTML

<div class="wrapper">
  <div class="dashed-box">Рискова рамка</div>
  <div class="gold-box">Золота рамка</div>
  <div class="green-box">Зелена рамка</div>
</div>

CSS

.wrapper {
  position: relative;
}

.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 position
• Розуміння z-index CSS