Урок 19. Z-індекс

Здрастуй, шановний читачу.

Відео: Курс CSS - Урок №38. Z-індекси

Це дев`ятнадцятий урок вивчення CSS. У цьому урок ми вивчимо властивість, що дозволяє управляти елементами по Осі Z. Тобто видимістю елементів від сайту до екрану.

Перед вивченням даного уроку пройдіть попередні уроки:

Урок 1. Що таке CSS?
Урок 2. Базові селектори
Урок 3. Групові селектори і селектори нащадків
Урок 4. Псевдоселектори посилань
Урок 5. Шрифти
Урок 6. Оформлення тексту
Урок 7. Рамки
Урок 8. Оформлення списків
Урок 9. Спадкування
Урок 10. Блокова модель
Урок 11. Висота і ширина блоку
Урок 12. Конфлікти полів
Урок 13. Робота з зображеннями. Частина 1
Урок 13. Робота з зображеннями. Частина 2
Урок 14. Таблиці
Урок 15. Форми
Урок 16. Властивість float
Урок 17. Каркас на основі властивості float
Урок 18. Позиціонування. Частина 1
Урок 18. Позиціонування. Частина 2
Урок 18. Позиціонування. частина 3

Теорія та практика

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

Відео: C # From A to Z - Lesson 19: Constants

Розглянемо на прикладі шаблону, який використовували в уроках з позиціонування:

Подивитися прімерСкачать

z-index

Більш докладно я показав на зображенні нижче (тут я показав, що на якому шарі буде знаходиться):

Зробимо все як на зображенні вище. Тобто шапка сайту це самий нижній шар, потім йде шар з меню, і зверху блок із текстом. Що необхідно дописати в CSS:

1234567891011121314151617181920212223242526272829303132

#menu{position:fixed-background-image: url(`Images / bg_menu_banner.jpg`)-background-repeat:repeat-x-height:84px-width:100%-margin:0-top:0-left:0-z-index:8- / * Встановлюємо значення меню менше ніж значення блоку з текстом * /}...#wrapper{width:980px-margin:0 auto-z-index:10- / * Встановлюємо значення блоку з текстом більше ніж значення блоку меню * /}...#overBlock{width:972px-height:150px-background-image: url(`Images / over-block.jpg`)-background-repeat:no-repeat-margin:0 auto-position:relative-top:-55px-z-index:10- / * Встановлюємо значення блоку з текстом більше ніж значення блоку меню * /}

Як я і говорив ми задаємо елементу який нижче довільне значення властивості z-index, ніж у того, який буде над ним.

Як це виглядає в браузері:

Подивитися прімерСкачать

Ось і все що необхідно знати про цій якості і шарах. Пробуйте застосувати на практиці щоб закріпити отримані знання.

Відео: Японія. Уроки живого японської мови від Шамова Дмитра. Вступний урок. Частина 1

Більше практикуйтеся!