Начало · Справочники · Курсы · Разговоры

leechy.ru · Сайт почти придуман

z-index: кто сверху?

Что такое z-index о котором пойдет речь? Все очень просто. Изначально HTML-страница была двумерныйм холстом, на котором все элементы встают один за другим. Но в одну прекрасную осень вышли четвертые версии Internet Explorer и Netscape Navigator и вместе со слоями, т.е. элементами "выпрыгивающими" из HTML-потока и распологающимися как бы сверху других элементов, притащили за собой новую проблему: кто из этих элементов будет сверху (перекрывать остальные, ближе к посетителю страницы)? Именно эту проблему и должно решать CSS-свойство z-index. Т.е. если предположить, что в двумерном холсте есть координаты X и Y, то в трехмерном появляется координата Z. И чем больше у элемента значение z-index, тем больше у него шансов быть сверху остальных элементов на странице.

Все предельно просто и понятно. Хотя если бы это на самом деле было бы так, я бы не писал эту статью, так что продолжаю.

Основные правила

Для начала нужно сказать, что z-index'ами меряются только те элементы, у которых свойство position не равно static (а у всех элементов по-умолчанию position как раз static). Значение должно быть числом и по-умолчанию оно равно auto (о нем - ниже). Значение может быть как отрицательным так и положительным. У статических элементов оно равно нулю.

Таким образом все статичные элементы по-умолчанию находятся ниже по координате Z, чем относительно, абсолютно или фиксированно спозиционированных (и даже плавающих, которые хоть и static, но не совсем), у которых не указано или указано положительное значение z-index.

[пример 1]

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

[пример 2]

Если элементы в HTML-дереве одного уровня (сиблинги), те, которые расположены позже будут показываться выше по координате Z, чем те, которые раньше, даже с одинаковым z-index'ом. Это также относится и к элементам, для которых это значение auto.

[пример 3]

Но если у элемента, который раньше в дереве z-index больше, то он должен быть выше по координате Z
(кажется у какого-то браузера здесь были проблемы - надо бы проверить!)

[пример 4]

Плавающие элементы

Вложенные элементы

Ошибки браузеров

Ошибки браузеров

Firefox 2 - понимает z-index у статичных элементов!