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 дозволяє гнучко управляти порядком накладання елементів на веб-сторінці, забезпечуючи правильне відображення ієрархії і взаємодії між різними шарами контенту. Це особливо корисно для створення складних макетів, спливаючих вікон, модальних діалогів і інших елементів інтерфейсу, які потребують контролю над порядком відображення.

Синтаксис

element.style.zIndex

Значення

Return

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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';
});

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

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