Пояснення Z-індексу: Як складати елементи за допомогою CSS

Я завжди боровся із властивістю CSS z-index. Спочатку це звучить так просто. Елементи з вищим значенням z-індексу відображаються перед елементами з нижчим значенням z-індексу. Тим не менше, багато разів я потрапляв у ситуації, коли здається, що значення z-індексу взагалі не мало жодного ефекту.

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

Порядок укладання за замовчуванням

Давайте спочатку згадаємо порядок за замовчуванням, в який браузер укладає елементи, коли не застосовується z-індекс:

  1. Кореневий елемент (елемент)
  2. Нерозміщені елементи в тому порядку, в якому вони визначені
  3. Розміщені елементи в тому порядку, в якому вони визначені

Позиціонований елемент - це елемент зі значенням позиції за замовчуванням статичним. Позиціонований елемент - це елемент з будь-яким іншим значенням позиції. Прикладами інших значень є: абсолютне, відносне, липке або фіксоване.

HTML:

CSS:

/* This is only the CSS that is relevant for the example. For the complete CSS check the links below the pictures. */
.blue, .pink, .orange { position: absolute;}

Ми визначили зелене поле в останньому документі. Тим не менше, він виступає за іншими, бо не позиціонується.

Укладання з z-індексом

Якщо ми зараз хочемо змінити порядок укладання цих елементів, ми можемо використовувати властивість z-index. Елемент з вищим z-індексом відображатиметься перед елементом з нижчим z-індексом. Зауважимо одне, що z-index працює лише з позиціонованими елементами .

.blue, .pink, .orange { position: absolute;}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100; // has no effect since the green box is non- positioned}

Помаранчева рамка з вищим z-індексом відображається перед синьою рамкою.

Контекст укладання

Скажімо, ми додаємо до розмітки ще одне позиційне вікно, яке ми хочемо розмістити за рожевим полем. Ми оновлюємо наш код таким чином:

HTML:

CSS:

.blue, .pink, .orange, .purple { position: absolute;}
.purple { z-index: 0;}
.pink { z-index: 1;}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100;}

Наша рожева коробка відображається перед фіолетовою коробкою, як очікувалося, але що сталося з помаранчевою коробкою? Чому це раптом відстає від синього, хоча він має вищий z-індекс? Це пов’язано з тим, що додавання значення елемента z-індексу до елемента утворює так званий контекст стекування .

Рожеве поле має значення z-індексу, крім автоматичного, що утворює новий контекст складання. Той факт, що він формує контекст стекування, впливає на те, як відображаються його дочірні елементи.

Можна змінити порядок укладання дочірніх елементів рожевої коробки. Однак їх z-індекс має значення лише в цьому контексті стекування . Це означає, що ми не зможемо перемістити помаранчеву рамку перед синьою рамкою, оскільки вони вже не знаходяться в одному контексті складання.

Якщо ми хочемо, щоб синя коробка та оранжева коробка були частиною одного контексту стекування, ми можемо визначити синю коробку як дочірній елемент рожевої коробки. Це зробить блакитну коробку за помаранчевою.

Контексти укладання формуються не лише при застосуванні z-індексу до елемента. Існує ще кілька властивостей, які змушують елементи формувати контекст стекування. Деякі приклади: фільтр, непрозорість і перетворення.

Повернемося до нашого попереднього прикладу. Блакитна коробка знову є рідним братом до рожевої коробки. Цього разу замість того, щоб додавати z-індекс до рожевого вікна, ми застосовуємо до нього фільтр.

HTML:

CSS:

.blue, .pink, .orange { position: absolute;}
.pink { filter: hue-rotate(20deg);}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100;}

Помаранчеве поле все ще має вищий z-індекс, ніж синій, але все ще відображається за ним. Це тому, що значення фільтра призвело до того, що рожеве поле утворило новий контекст стекування.

Резюме

Використовуючи z-index на позиціонованих елементах, ми можемо змінити порядок укладання за замовчуванням.

Застосовуючи певні властивості CSS, елемент може сформувати контекст стекування. Значення Z-індексу мають значення лише в тому ж контексті стекування.

Для отримання додаткової інформації про z-index я рекомендую цю статтю. Я отримав від цього багато натхнення, коли писав це.

Дякуємо за читання! :)