Швидкі посилання
Ключові висновки
- CSS z-index визначає порядок укладання елементів на веб-сторінці, причому попереду відображаються більші числа.
- z-index працює з нестатичними елементами та вимагає використання властивості позиції (наприклад, фіксована, абсолютна) для його функціонування.
- Практичні приклади використання z-index включають навігаційні меню, липкі заголовки, акордеони та інтерактивні спливаючі вікна для кращого візуального макета.
Якщо вам коли-небудь було важко створити спадне меню або липкий заголовок, який залишатиметься перед іншим вмістом, вам потрібно освоїти властивість CSS z-index. Цей простий, але потужний інструмент визначає порядок укладання елементів, впливаючи на візуальну ієрархію вашої веб-сторінки.
Ознайомтеся з основами та роботою властивості z-index і дослідіть способи, якими ви можете практично включити її у свій наступний веб-проект.
Що таке CSS z-index?
Властивість z-index CSS визначає порядок укладання елементів, що перекриваються, на веб-сторінці. Ви можете використовувати його, щоб визначити, які елементи відображаються попереду чи позаду інших.
Уявіть собі стос кольорового паперу, який представляє різні елементи на веб-сторінці. Присвоюючи номер, ви можете впливати на положення кожного паперу в стосі. Коли ви використовуєте z-індекс, менше число означає, що елемент відображається позаду інших, тоді як більше число означає, що він попереду.
Термін z-індекс походить від осі z, що представляє третій вимір у тривимірній декартовій системі координат. Вісь Z вказує на глибину об’єкта або на те, наскільки далеко назад чи вперед він знаходиться в межах вашої видимості.
Як працює властивість CSS z-index
Властивість z-index має простий синтаксис. Ось кілька прикладів:
z-index: auto;
z-index: 10;
z-index: -2;
Значення за замовчуванням — auto, яке в більшості випадків дорівнює значенню 0. Зауважте, що ви можете використовувати від’ємні числа, які поводяться так само, як і додатні числа: менші значення відображаються за вищими значеннями в порядку стекування.
Вам потрібно буде дізнатися, як працює властивість CSS position, щоб використовувати властивість z-index. Перш ніж застосувати z-index до елемента, ви повинні встановити його властивість position. Z-index працює з будь-яким нестатичним елементом, який встановлюють ці загальні значення властивості position:
- фіксований
- абсолютний
- відносний
- липкий
Нижче наведено простий приклад роботи z-індексу з використанням однієї з властивостей позиції CSS.
.red-box, .blue-box, .green-box {
width: 200px;
height: 200px;
position: fixed;
}.red-box {
background-color: red;
top: 50px;
left: 50px;
z-index: 3;
}
.blue-box {
background-color: blue;
top: 80px;
left: 80px;
z-index: 2;
}
.green-box {
background-color: green;
top: 110px;
left: 110px;
z-index: 1;
}
У цьому прикладі кожна кольорова коробка має фіксовану позицію, визначену верхньою та лівою сторонами. Властивість z-index контролює порядок укладання блоків, причому більші значення виводять ці елементи на передній план.
Експериментуючи з різними властивостями та значеннями позиції, ви можете досліджувати різні способи використання z-індексу у своїх проектах.
Практичні приклади використання z-індексу
Ось кілька прикладів веб-компонентів, які використовують властивості z-index, з якими можна попрактикуватися.
- Навігаційні меню: якщо ви хочете створити спадне меню за допомогою HTML і CSS, ви можете використовувати z-index, щоб керувати порядком розміщення меню на панелі навігації. Переконайтеся, що спадне меню, коли воно активне, відображається над іншими елементами сторінки.
- Закріплені заголовки: створюючи закріплений заголовок за допомогою CSS, ви можете використовувати z-index, щоб він залишався фіксованим у верхній частині веб-сторінки, коли користувачі прокручують сторінку. Він забезпечує чітке відокремлення заголовка від решти сторінки.
- Гармошки: використовуючи HTML і CSS для створення гармошки, вам знадобиться z-index, щоб контролювати порядок укладання панелей. Переконайтеся, що активна панель-гармошка відображається над іншими, створюючи візуально чіткий і організований дисплей.
- Інтерактивні спливаючі вікна: створюйте інтерактивні накладення або спливаючі вікна за допомогою z-index. Це особливо корисно для відображення додаткової інформації або параметрів без переходу від основного вмісту.
Ці практичні приклади демонструють універсальність властивості z-index для покращення візуального макета та взаємодії з користувачем на веб-сторінці.