Среда, 27 Марта 2013 16:09

CSS свойство z-index

Written by 
Оцени эту запись
(1 Голос)

CSS свойство z-index определяет порядок элементов HTML страницы и позволяет менять этот порядок. Элементы HTML страниц следуют в заданном им порядке. Если они накладываются друг на друга, то более поздний элемент будет находиться сверху на более раннем. При помощи свойства z-index эту последовательность можно изменить. 

 

Пример:

 

<div style="width: 100px; height: 100px; background: red;">Text</div>

<div style="width: 100px; height: 100px; background: blue; margin-top: -50px; margin-left: 50px;">Text</div>

 

Результат:

 

 

Text
Text

 

Синий квадрат расположен поверх красного, так как в документе он следует позже. Чтобы изменить это следование, нужно использовать свойство z-index. Обратите внимание, что данное свойство работает только для позиционированных элементов, то есть для элементов, у которых свойство position имеет значение отличное от static.

 

Значит, нашим элементам нужно добавить свойство "position: relative" и первому элементу задать z-index выше, чем второму.

 

 

<div style="width: 100px; height: 100px; background: red; position: relative; z-index: 2;">Text</div>
<div style="width: 100px; height: 100px; background: blue; margin-top: -50px; margin-left: 50px; position: relative; z-index: 1;">Text</div>

 

 

Text
Text

 

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

 

Если у элементов не задано свойство z-index, по умолчанию его значение auto, то элементы следуют в том порядке, в котором они определены в документе. 

 

Значением свойства z-index может быть число(положительное, отрицательное или ноль) или auto. Чем выше значение z-index у элемента, тем выше он будет находиться.

 

Свойство z-index работает с элементами, у которых свойство position имеет значение relative, absolute или fixed.

 

Если у элемента стоит свойство  position со значением relative, absolute или fixed, то он будет находиться выше, чем элементы без позиционирования.

 

 

<div style="width: 100px; height: 100px; background: red; position: relative;">Text</div>
<div style="width: 100px; height: 100px; background: blue; margin-top: -50px; margin-left: 50px;">Text</div>

 

Результат:

 

Text
Text

 

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

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов