Від автора: вітаю вас в нашій серії уроків 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.
