style.zIndex в JavaScript — змінити z-index елемента
Загальний опис
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 дозволяє гнучко управляти порядком накладання елементів на веб-сторінці, забезпечуючи правильне відображення ієрархії і взаємодії між різними шарами контенту. Це особливо корисно для створення складних макетів, спливаючих вікон, модальних діалогів і інших елементів інтерфейсу, які потребують контролю над порядком відображення.
- Порада
-
Пам'ятайте, що
автор: Bondz-indexпрацює в контексті свого батьківського контейнера з встановленим позиціонуванням. Якщо ви маєте проблеми з накладанням елементів, перевірте ієрархію DOM і переконайтеся, що батьківський елемент також має правильне значенняposition. - Порада
-
Коли у вас є декілька шарів, важливо використовувати масштабовані значення
автор: Bondz-index. Наприклад, замість використання значень 1, 2, 3, використовуйте 10, 20, 30, щоб мати можливість вставляти нові елементи між існуючими шарами без необхідності змінювати значення всіх елементів. - Порада
-
Для анімацій та ефектів, де елементи повинні переміщуватися вперед і назад візуально, використовуйте
z-indexразом з CSS-переходами або анімаціями. Це дозволить створити плавні та привабливі ефекти, що покращують взаємодію користувача з веб-сторінкою.
автор: Bondelement.style.transition = 'z-index 0.3s ease'; element.style.zIndex = '50';
Синтаксис
element.style.zIndexПереглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 4 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі є два модальних вікна (modal1 і modal2), які можуть відкриватися за допомогою відповідних кнопок. Коли відкривається одне з модальних вікон, його z-index встановлюється на 100, а z-index іншого модального вікна зменшується до 50, що дозволяє завжди розташовувати активне модальне вікно на передньому плані.
HTML
<div id="modal1">Демонстраційний елемент</div>
<div id="modal2">Демонстраційний елемент</div>
<div id="openModal1">Демонстраційний елемент</div>
<div id="openModal2">Демонстраційний елемент</div>JS
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, що піднімає його над іншими елементами. Це корисно для створення інтерфейсів, де користувачі можуть взаємодіяти з елементами, змінюючи їх порядок накладання, наприклад, у додатках для малювання або на панелях управління.
HTML
<div class="sortable">перший елемент sortable</div>
<div class="sortable">другий елемент sortable</div>JS
var elements = document.querySelectorAll('.sortable');
var zIndexCounter = 10;
elements.forEach(function(element) {
element.addEventListener('click', function() {
zIndexCounter += 10;
element.style.zIndex = zIndexCounter;
});
});HTML
<header>
<h2 class="title">element.style.zIndex</h2>
<p class="description">Визначає порядок накладання елементів уздовж осі z (глибина) на веб-сторінці.</p>
</header>
<main>
<div class="result">
<!-- Перемикачі для зміни порядку накладання елементів -->
<div>
<input type="radio" id="photo1" name="photo" value="photo1">
<label for="photo1">Photo 1</label>
<input type="radio" id="photo2" name="photo" value="photo2">
<label for="photo2">Photo 2</label>
<input type="radio" id="photo3" name="photo" value="photo3">
<label for="photo3">Photo 3</label>
</div>
<!-- Елементи для демонстрації -->
<div id="photo1Element" class="photo-element" style="z-index: 1;">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23e63946'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%23a4161a'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23ffd166'/%3E%3C/svg%3E" alt="Photo 1">
</div>
<div id="photo2Element" class="photo-element" style="z-index: 2;">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%232a9d8f'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%23176b60'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9f5db'/%3E%3C/svg%3E" alt="Photo 2">
</div>
<div id="photo3Element" class="photo-element" style="z-index: 3;">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%233a86ff'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%231d3557'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23ffd166'/%3E%3C/svg%3E" alt="Photo 3">
</div>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
position: relative;
height: 300px;
}
.photo-element {
position: absolute;
width: 150px;
height: 150px;
top: 50px;
left: 50px;
transition: z-index 0.3s ease;
}
/* зсув, щоб було видно, яка картка лежить зверху */
#photo2Element { top: 80px; left: 110px; }
#photo3Element { top: 110px; left: 170px; }
.photo-element img {
width: 100%;
height: 100%;
}JS
document.addEventListener('DOMContentLoaded', function () {
const photos = document.querySelectorAll('input[name="photo"]');
const photoElements = {
photo1: document.getElementById('photo1Element'),
photo2: document.getElementById('photo2Element'),
photo3: document.getElementById('photo3Element') };
photos.forEach(function (photo) {
photo.addEventListener('change', function () {
const selectedPhoto = this.value;
Object.keys(photoElements).forEach(function (key) {
if (key === selectedPhoto) {
photoElements[key].style.zIndex = '3';
} else {
photoElements[key].style.zIndex = '1';
}
});
});
});
});
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!