Порядок наложения позиционированных элементов: z-index

z-index

Поддержка браузерами
Настольные браузеры Chrome Firefox (Gecko) Internet Explorer Opera Safari
Версии браузеров 1.0 3.0 (1.9) 4.0 4.0 1.0
Свойство
z-index — это свойство позволяет определить порядок наложения позиционированных элементов друг на друга
Описание
По умолчанию позионированные элементы накладываются друг на друга в том порядке в каком они встречаются в документе, если нужно изменить этот порядок, то применяется свойство z-index
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
К тем элементам которые имеют значения absolute, relative или fixed свойства position
Может принимать значения
число |auto | inherit
Значение по умолчанию
auto
Правила записи
свойство: значение;
Примеры

1
2
3

Здесь видно что по умолчанию блоки накладываются друг на друга в той последовательности в которой они встречаются в разметке

1
2
3

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

Это значит что свойство унаследует значение от родителя

Поделиться