Керування Порядком Накладання Елементів
Властивість z-index визначає порядок накладання позиціонованих елементів на веб-сторінці. Вона застосовується лише до позиціонованих елементів, які мають значення властивості position: absolute, fixed, relative або sticky. Оскільки ці елементи виводяться з нормального потоку документа, для визначення того, який із них буде розташований вище або нижче, використовується z-index.
z-index: number_without_units
Чим більше значення властивості z-index, тим вище елемент відображається на екрані користувача.
Практичне завдання. Є чотири елементи div з класом box, кожен оформлений як квадрат і пронумерований відповідно до їхнього порядку в документі html. Квадрати наразі розташовані один над одним. Завдання — змінити значення властивості z-index так, щоб квадрат 3 був попереду всіх, а квадрат 4 — позаду.
index.html
index.css
Примітка
Якщо встановити однакове значення властивості
z-indexдля різних елементів, браузер відобразить ці елементи у тому порядку, в якому вони розташовані у файліhtml.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
How do I set the z-index values to bring square 3 to the front and square 4 to the back?
Can you explain what happens if two elements have the same z-index value?
Can you show an example of how the z-index property is used in CSS?
Awesome!
Completion rate improved to 2.04Керування Порядком Накладання Елементів
Свайпніть щоб показати меню
Властивість z-index визначає порядок накладання позиціонованих елементів на веб-сторінці. Вона застосовується лише до позиціонованих елементів, які мають значення властивості position: absolute, fixed, relative або sticky. Оскільки ці елементи виводяться з нормального потоку документа, для визначення того, який із них буде розташований вище або нижче, використовується z-index.
z-index: number_without_units
Чим більше значення властивості z-index, тим вище елемент відображається на екрані користувача.
Практичне завдання. Є чотири елементи div з класом box, кожен оформлений як квадрат і пронумерований відповідно до їхнього порядку в документі html. Квадрати наразі розташовані один над одним. Завдання — змінити значення властивості z-index так, щоб квадрат 3 був попереду всіх, а квадрат 4 — позаду.
index.html
index.css
Примітка
Якщо встановити однакове значення властивості
z-indexдля різних елементів, браузер відобразить ці елементи у тому порядку, в якому вони розташовані у файліhtml.
Дякуємо за ваш відгук!
