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.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.zIndex

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	8	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<div id="modal1">Демонстраційний елемент</div>
<div id="modal2">Демонстраційний елемент</div>
<div id="openModal1">Демонстраційний елемент</div>
<div id="openModal2">Демонстраційний елемент</div>

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

<div class="sortable">перший елемент sortable</div>
<div class="sortable">другий елемент sortable</div>

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

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