CSS від А до Я: властивість z-index

37

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких рад по роботі з властивістю z-index.

Повний відеоурок і його текстову версію властивості z-index можна подивитися за посиланням.

Z значить z-index

Як і слід було очікувати, остання стаття в серії буде повністю присвячена властивості z-index.

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

z-index працює тільки з позиціонованими елементами

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

Точне позиціонування елементів незамінне при створенні складних макетів і цікавих шаблонів інтерфейсів, але всі ми хочемо уміти змінювати порядок шарів без необхідності зрушувати елемент з його початкового положення на сторінці.

Якщо вам потрібно всього лише змінити порядок шарів, можна просто задати властивість position: relative і не вказувати top, right, bottom або left. Елемент залишиться на своєму місці, структура документа не порушиться, а властивість z-index спрацює як треба.

Властивості z-index можна вказувати негативні значення

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

Від’ємні значення можна використовувати з псевдоэлементами для їх розміщення за контентом батьківського елемента.

Для розміщення псевдоелемент :before або after під текстом батьківського елемента необхідно вказати від’ємне значення. Такий принцип роботи стека.

Погляньте на CodePen демо нижче, можете погратися з різними значеннями z-index.

Використовуйте 100 в якості инкремента для z-index

При роботі з z-index не прийнято писати код:

.modal {
z-index: 99999;
}

Мені боляче дивитися на цей код. Все стає ще гірше, коли додаються !important. Подібний код – ознака того, що розробник не розуміє контексту стека і намагається примусово розташувати один шар над іншим.

Щоб не використовувати довільні числа типу 9999, 53, 12, ми можемо систематизувати нашу шкалу z-index і привести її в порядок. І це не тому, що я розробник з обсесивно-компульсивним розладом. Чесно.

Як инкремента для z-index я використовую не однозначне число, а 100.

.layer-one {z-index: 100;}
.layer-two {z-index: 200;}
.layer-three {z-index: 300;}

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

Такий ручний підхід у створенні системи z-index дуже надійний, але він може стати ще більш гнучким у парі з препроцесором типу Sass.

Ось і все, друзі. Це була остання стаття з серії CSS від А до Я! Сподіваємося, вам сподобалося, і ви дізналися багато нового про властивості CSS.