css.in.ua
Підтримати

JS властивість CSSStyleDeclaration.zIndex

Загальний опис

element.style.zIndex - це CSS-властивість, яка використовується для визначення порядку накладання елементів уздовж осі z на веб-сторінці. Вона дозволяє контролювати, які елементи будуть зверху інших, коли вони накладаються один на одного. Значення z-index може бути позитивним, негативним або нульовим, і чим більше значення, тим вище елемент розташований над іншими елементами з меншим значенням z-index.

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

Для використання element.style.zIndex через JavaScript спочатку потрібно отримати доступ до елемента за допомогою методу getElementById, querySelector або іншого способу вибору елемента в DOM. Потім можна встановити або змінити значення z-index для цього елемента.

Приклад 1: Встановлення значення z-index для елемента.

var element = document.getElementById('myElement');
element.style.zIndex = '10';

У цьому прикладі елемент з id myElement буде розташований над усіма елементами, які мають значення z-index менше 10.

Приклад 2: Використання негативного значення z-index для відправки елемента на задній план.

var element = document.getElementById('backgroundElement');
element.style.zIndex = '-1';

У цьому прикладі елемент з id backgroundElement буде розташований позаду всіх елементів, які мають значення z-index більше або дорівнює нулю.

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

var foregroundElement = document.getElementById('foregroundElement');
var backgroundElement = document.getElementById('backgroundElement');

foregroundElement.addEventListener('click', function() {
  foregroundElement.style.zIndex = '20';
  backgroundElement.style.zIndex = '10';
});

У цьому прикладі при натисканні на foregroundElement його z-index встановлюється на 20, а backgroundElement - на 10, що розташовує foregroundElement над backgroundElement.

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

Порада:

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

Коли у вас є декілька шарів, важливо використовувати масштабовані значення z-index. Наприклад, замість використання значень 1, 2, 3, використовуйте 10, 20, 30, щоб мати можливість вставляти нові елементи між існуючими шарами без необхідності змінювати значення всіх елементів.
Порада:

Для анімацій та ефектів, де елементи повинні переміщуватися вперед і назад візуально, використовуйте z-index разом з CSS-переходами або анімаціями. Це дозволить створити плавні та привабливі ефекти, що покращують взаємодію користувача з веб-сторінкою.

element.style.transition = 'z-index 0.3s ease';
element.style.zIndex = '50';

Синтаксис

element.style.zIndex

Значення

Return

Переглядачі

Переглядач

1

1

3

8

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


Цей приклад дозволяє користувачам змінювати порядок накладання елементів (фотографій) за допомогою перемикачів. Коли користувач вибирає одну з фотографій, її z-index встановлюється на 3, що піднімає її над іншими фотографіями, які мають z-index, встановлений на 1. Це демонструє, як можна динамічно керувати порядком накладання елементів на веб-сторінці, щоб користувачі могли взаємодіяти з контентом.

У цьому прикладі є два модальних вікна (modal1 і modal2), які можуть відкриватися за допомогою відповідних кнопок. Коли відкривається одне з модальних вікон, його z-index встановлюється на 100, а z-index іншого модального вікна зменшується до 50, що дозволяє завжди розташовувати активне модальне вікно на передньому плані.

var modal1 = document.getElementById('modal1');
var modal2 = document.getElementById('modal2');
var openModal1Button = document.getElementById('openModal1');
var openModal2Button = document.getElementById('openModal2');

openModal1Button.addEventListener('click', function() {
  modal1.style.display = 'block';
  modal1.style.zIndex = '100';
  modal2.style.zIndex = '50';
});

openModal2Button.addEventListener('click', function() {
  modal2.style.display = 'block';
  modal2.style.zIndex = '100';
  modal1.style.zIndex = '50';
});

У цьому прикладі група елементів з класом sortable може змінювати свій порядок накладання при натисканні. Кожен раз, коли користувач натискає на елемент, його z-index збільшується на 10, що піднімає його над іншими елементами. Це корисно для створення інтерфейсів, де користувачі можуть взаємодіяти з елементами, змінюючи їх порядок накладання, наприклад, у додатках для малювання або на панелях управління.

var elements = document.querySelectorAll('.sortable');
var zIndexCounter = 10;

elements.forEach(function(element) {
  element.addEventListener('click', function() {
    zIndexCounter += 10;
    element.style.zIndex = zIndexCounter;
  });
});

Спільнота

Зв'язок