CSS z-index — порядок накладання елементів
Властивість z-index визначає порядок стека елемента. Іншими словами, Ви можете розмістити елемент на сторінці вище іншого елементу або перед ним.
Будь-які позиційовані елементи на веб-сторінці накладаються один на одного в певному порядку, імітуючи тим самим невидимий третій вимір, котрий перпендикулярний екрану. Кожен елемент може перебувати в цьому стеку, як нижче, так і вище інших об'єктів на веб-сторінці.
Де саме буде перебувати елемент відносно інших елементів, задається за допомогою властивості z-index.
Наприклад, елемент зі z-index, який дорівнює 300, показуватиметься ближче користувачеві, ніж елементі зі z-index, який дорівнює 200. Аналогічно, елемент зі значенням 50 ближче, ніж елемент зі значенням 20 тощо. Тобто чим вище значення z-index, тим вище він знаходиться відносно елементів із нижчим значенням заданим для цієї властивості.
Якщо цю властивість не чіпати, елементи будуть розташовані залежно від потоку: чим нижче у коді, тим елемент вище на сторінці. За допомогою z-index, можна штучно змінювати цю поведінку.
Властивість z-index може приймати два значення: ключове слово auto або число, яке означатиме рівень у потоці.
Загальний опис
автор: NagarD
- Нотатка
-
Ця властивість працює тільки для елементів, у яких значення положення задано як
автор: Svitlanaabsolute,relativeабоfixed(position:absolute,position:relative,position:fixed).
Синтаксис
z-index: auto|number|initial|inherit;Властивість z-index може отримувати 4 значень:
-
auto -
Встановлює порядок стека еквівалентно батьківським елементам. Це без задання
автор: Svitlana -
number -
Встановлює порядок стека елемента. Дозволяється використовувати від'ємні значення.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.zIndex="-1" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 4 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Динамічне редагування значення для властивості z-index
HTML
<p>Спробуйте редагувати значення для <code>z-index</code>, щоб змінити положення елементу по осі Z:</p>
<input type="number" placeholder="auto" id="field"></input>
<div class="wrapper">
<div class="block block-1">
<code>z-index: auto;</code>
</div>
<div class="block block-2" id="block">
<code>z-index: <strong id="newval">auto</strong>;</code>
</div>
<div class="block block-3">
<code>z-index: 5;</code>
</div>
</div>CSS
body {
font-family: monospace;
font-size: 16px;
color: #222;
text-align: center;
line-height: 1.5;
}
input[type=number] {
padding: 4px;
}
.wrapper {
position: relative;
margin-top: 36px;
height: 250px;
}
.block {
background-color: #eee;
border: 2px solid #666;
width: 150px;
height: 75px;
padding-top: 26px;
font-size: 14px;
position: absolute;
}
strong {
color: #252525;
}
.block-1 {
top: 20px;
left: 20px;
}
.block-2 {
top: 105px;
left: 45px;
}
.block-3 {
top: 170px;
left: 70px;
z-index: 5;
}JS
var block = document.getElementById('block');
var newval = document.getElementById('newval');
document.getElementById('field').onchange = function () {
block.style.zIndex = this.value;
newval.innerHTML = this.value;
};
//# sourceURL=pen.jsДемонстрація роботи властивості
HTML
<div class="info">
<p>За допомогою властивості <code>z-index</code> ми можемо встановити, порядок розміщення елементу по осі Z. </p>
<p>Нижче, представлено по два блоки. Вони позиціюванні та слідують один за одним, у тому порядку в якому вони розміщені в розмітці. У другому контейнері, ми змінюємо цей порядок за допомогою властивості <code>z-index</code>.</p>
</div>
<div class="wrapper">
<div class="block one">
<div class="child1">Блок №1</div>
<div class="child2">Блок №2</div>
</div>
<div class="block two">
<div class="child1">Блок №1</div>
<div class="child2">Блок №2</div>
</div>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 17px;
}
.info {
padding: 4px 6px;
}
.info p {
margin-bottom: 16px;
margin-top: 0;
}
code {
font-weight: 700;
color: #444;
border-bottom: 2px solid #666;
}
.wrapper {
display: flex;
justify-content: space-around;
}
.block {
width: 25%;
height: 150px;
background-color: gold;
position: relative;
font-size: 13px;
padding: 4px;
z-index: -10;
}
.child1,
.child2 {
color: #999;
background-color: #222;
padding: 4px 8px;
font-size: 1.75em;
display: inline-block;
position: absolute;
}
.child2 {
background-color: #fff;
color: #444;
top: 1.25em;
left: 1em;
}
.block.two .child2 {
z-index: -1;
}Динамічний приклад
HTML
<div class="box">
<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>z-index</strong>.</p>
<p>Вона встановлює порядок розміщення елемента по осі Z. Ви можете визначити значення для кожного блоки нижче окремо.</p>
</div>
<div class="wrapper">
<div class="block one">z-index: <input type="number" class="input" id="input1" value="1">;</div>
<div class="block two">z-index: <input type="number" class="input" id="input2" value="2">;</div>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 16px;
line-height: 1.45;
height: 100vh;
padding: 16px;
}
.box {
background-color: #f7f7f7;
padding: 16px;
border: 2px solid #666;
}
.input {
width: 75px;
}
#select {
position: relative;
top: -4px;
width: 100px;
}
.wrapper {
position: relative;
margin-top: 36px;
}
.block {
color: #999;
background-color: #222;
padding: 36px;
font-size: 1.75em;
display: inline-block;
position: absolute;
z-index: 1;
}
.block.two {
background-color: #F74C32;
color: #444;
z-index: 2;
top: 3em;
left: 3em;
}JS
document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
var input1 = document.querySelector('#input1').value;
var input2 = document.querySelector('#input2').value;
document.querySelectorAll('.block.one').forEach((n) => n.style.setProperty('z-index', input1));
document.querySelectorAll('.block.two').forEach((n) => n.style.setProperty('z-index', input2));
}));Приклад роботи властивості
HTML
<div class="infront">
<code>z-index: 2</code>
</div>
<div class="behind">
<code>z-index: 1</code>
</div>CSS
div {
width: 200px;
height: 80px;
position: relative;
padding: 16px;
font-family: monospace;
}
.infront {
background-color: #eee;
top: 70px;
left: 120px;
z-index: 2;
color: #222;
}
.behind {
background-color: #444;
top: -80px;
left: 35px;
z-index: 1;
color: #f1f1f1;
}Модалка з z-index 9999 лишається під банером, бо її батько має z-index 10, а банер — 20: числа порівнюються між батьками, а не наскрізь.
HTML
<div class="header">
Шапка, z-index: 10
<div class="modal">Модалка, z-index: 9999 — і все одно знизу</div>
</div>
<div class="banner">Банер, z-index: 20</div>CSS
body {
font-family: sans-serif;
font-size: 15px;
padding: 10px;
}
.header {
position: relative;
z-index: 10;
padding: 10px;
background: #cfe6ff;
border: 1px solid #0172ad;
}
.modal {
position: absolute;
z-index: 9999;
top: 30px;
left: 24px;
width: 240px;
padding: 14px;
background: gold;
border: 2px solid #333;
}
.banner {
position: relative;
z-index: 20;
margin-top: 10px;
height: 110px;
padding: 10px;
background: #0172ad;
color: #fff;
}Коментарі
Коментарів ще немає — будьте першим!