Z-index - css властивість позиціонування, створення сайтів і заробіток в мережі

Привіт, шановні Новомосковсктелі блогу Goldbusinessnet.com! Час від часу я дозволяю собі додавати матеріали в скарбничку уроків CSS і сьогодні ми поговоримо про властивості z-index, яке впливає на позиціонування елементів на веб-сторінці.

Треба розуміти, що дане правило працює тільки щодо позиціонуються тегів, для яких прописано властивість position зі значеннями absolute, relative і fixed. Тобто для стандартного потоку документа (де позиціонування не задано або його параметр визначений як static) воно діяти не буде. Нижче я продемонструю роботу z-index на конкретному прикладі.

Як z-index визначає позиції елемента

Отже, для кожного елемента в CSS знаходиться своє місце на вебсторінці відповідно до прописаними для нього стилями. Місцезнаходження всіх блоків відносно один одного визначається за допомогою системи координат.

Вона розташована перпендикулярно площині, утвореної X і Y, і спрямована прямо на нас. Само собою зрозуміло, що точкою відліку по осі Z є нуль. У нульовій точці розташовані всі статичні елементи, для яких визначено властивість position static (нормальне позиціонування).

За замовчуванням, якщо position зовсім не прописаний, то така ситуація абсолютно рівнозначна тій, як якщо б був вказаний параметр static. В цьому випадку відображення всіх HTML елементів сторінки відбувається в стандартному потоці. Таким чином, position, як, наприклад, і float (в цій статті про створення плаваючих елементів в CSS інформація) дає можливість змінювати звичайний варіант черговості для вирішення спеціальних завдань верстки.

Незважаючи на те, що для статичних вебелементов значення z дорівнює нулю, тобто вони розташовуються в площині X-Y, для них визначені правила в тому випадку, якщо вони починають наїжджати один на одного.

Основне правило говорить: вебелемент, який визначається тегом, який розташований нижче в HTML коді сторінки, буде знаходиться ближче до нас. Тобто він буде перекривати зверху блок, код якого знаходиться вище.

А ось явно позиційований (динамічні) елементи (зі значеннями relative, absolute, fixed) знаходяться вище всіх статичних. У відносинах між динамічними вебелементамі буде діяти все той же закон: той, що розташований нижче в коді, знаходиться ближче до нас (вище інших).

Ось тут і може сказати вирішальне слово властивість z-index. Чим більше його значення в числовому вираженні, тим вище буде знаходитися відповідний елемент вебсторінки. Але все це працює, як я вже сказав, тільки щодо елементів з абсолютним (absolute), відносним (relative) або фіксованим (fixed) позиціонуванням. Синтаксис параметрів z-index є наступним:

Числові значення можуть бути якими завгодно: як негативними, так і позитивними, включаючи нуль. Параметр auto зумовлює автоматичний порядок розташування вебелементов відповідно до їх черговості в коді HTML, враховуючи приналежність до батькові чи матері. Значення inherit показує, що z-index успадковується дочірніми елементами у батьківських.

Тепер настав час спрямувати наші дослідження в практичне русло, щоб підтвердити теоретичні викладки. Я візьму для прикладу три щодо позиціонуються контейнера DIV (із зазначеним властивістю position: relative). Для наочності напишу для кожного колірний відтінок, рамку, а також вкажу відступи зліва (left) і зверху (top), ширину (width) і висоту (height):

На веб-сторінці після інтерпретації HTML коду браузером ці три блоки будуть виглядати так:

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

Як бачимо, отримує перевагу червоний контейнер і він тепер перебуває вище інших. Далі спробуємо додати z-index вже зеленому блоку, але вже зі значенням 2:

Результат буде таким:

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