Лого SiteHere.ru

Урок 19. z-индекс

Урок 19. 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. Значения для него задаются следующим образом: одному блоку, который будет под каким-то блоком задаем значение поменьше, а другому, который будет его перекрывать, задаем значение побольше.

Рассмотрим на примере шаблона, который использовали в уроках по позиционированию:

Посмотреть примерСкачать

z-index

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

Наглядно в слоях

Сделаем всё как на изображении выше. То есть шапка сайта это самый нижний слой, затем идет слой с меню, и сверху блок с текстом. Что необходимо дописать в CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#menu{
    position:fixed;
    background-image: url('images/bg_menu_banner.png');
    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.png');
    background-repeat:no-repeat;
    margin:0 auto;
    position:relative;
    top:-55px;
    z-index:10; /*устанавливаем значение блока с текстом больше чем значение блока меню */
}

Как я и говорил мы задаем элементу который ниже произвольное значение свойства z-index, чем у того, который будет над ним.

Как это выглядит в браузере:

Посмотреть примерСкачать


Вот и всё что необходимо знать о данном свойстве и слоях. Пробуйте применить на практике чтобы закрепить полученные знания.

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

2 комментария к записи
  • pikasso

    Как при помоши z-index сделать задний фон сайта из флеша? есть флеш …хотелось бы его использовать как задний фон сайта …а он никак не хочет там быть….

     
    • Юрий

      Здравствуйте. Вам необходимо для div-а с флешем установить z-index например 1, а всем остальным div-ам с контентом больше единицы, для того чтобы все div-ы его перекрывали и он был на заднем фоне.

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *