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

Это девятнадцатый урок изучения CSS. В этом урок мы изучим свойство, позволяющее управлять элементами по Оси Z. То есть видимостью элементов от сайта к экрану.

Перед изучением данного урока пройдите предыдущие уроки:

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

Для того чтобы управлять блоками на странице по Оси 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, чем у того, который будет над ним.

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

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

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

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