Использование свойства z-index немного сложнее чем может показаться на первый взгляд. Обычно мы не уделяем достаточно внимания порядку наложения элементов. Однако, применяя относительное или абсолютное позиционирование, мы сталкиваемся с тем что элементы занимают одно пространство, перекрывая друг друга. И какой элемент будет на верхнем слое зависит от порядка наложения, который можно задать с помощью свойства z-index.
Если не указывать значения z-index у элементов, по умолчанию будет установлен следующий порядок:
- Спозиционированные элементы в том порядке, в котором они присутствуют в HTML коде страницы (чем ниже они в коде, тем выше в порядке).
- Инлайновые элементы
- Не спозиционированные «плавающие» элементы в том порядке, в котором они присутствуют в коде страницы.
- Все не спозиционированные, не «плавающие», блочные элементы в том порядке, в котором они присутствуют в коде страницы.
- Фон и граница корневого элемента.
Исходя из этого становится понятно что любой элемент который относительно или абсолютно спозиционирован будет перекрывать все остальные не спозиционированные элементы. А вместе они накладываются на корневой элемент.
По умолчанию свойство z-index принимает значение auto, также оно может принимать целое значение или наследовать его. Целое значение может быть как положительным так и отрицательным, а также быть равным 0. Чем больше положительное значение, тем выше элемент в порядке и соответственно чем больше отрицательное значение — тем элемент ниже. По умолчанию элементы находятся на 0-м слое. В соответствии с этим порядок наложения теперь выглядит следующим образом:
- Спозиционированные элементы со значением
z-indexбольше чем 0, затем в порядке появления в HTML коде страницы. - Спозиционированные элементы в том порядке, в котором они присутствуют в коде страницы.
- Инлайновые элементы
- Не спозиционированные «плавающие» элементы в том порядке, в котором они присутствуют в коде страницы.
- Все не спозиционированные, не «плавающие», блочные элементы в том порядке, в котором они присутствуют в коде страницы.
- Спозиционированные элементы со значением
z-indexменьше чем 0, затем в порядке появления в HTML коде страницы. - Фон и граница корневого элемента.
Наложение содержимого
Допустим блоку #front мы установили z-index:5. Тем самым мы устанавливаем новый порядок наложения для всех вложенных элементов блока с id="front". Допустим блок с id="middle" вложен в блок с id="front" и если установить ему значение z-index:2, то он должен перекрыть блок с id="front". Почему? Потому что, после установки z-index в блоке с id="front", для каждого дочернего элемента z-index будет расчитываться относительно блока с id="front":
- У блока c
id="front"z-index:5.0 - У блока с
id="middle"z-index:5.2
Пока блок с id="front" является предком, он устанавливает порядок наложения своего содержимого и его локальный уровень можно принять равным 0. Когда мы установили z-index для блока с id="middle", мы установили его локальное значение относительно блока с id="front". Т.к. 2 больше 0, поэтому #middle располагается выше.
Для примера рассмотрим следующий код:
<div id="one"> <div id="two"></div> </div> <div id="three"></div>
Теперь используя CSS, мы спозиционируем элементы так чтобы они перекрывали друг друга:
#one{ position: absolute; left: 0px; top: 20px; z-index: 10; } #two{ position: absolute; left: 50px; top: 30px; z-index: 15; } #three{ position: absolute; left: 100px; top: 30px; z-index: 12; }
В результате блок с id="two" находится ниже блока с id="three" даже не смотря на то, что значение z-index у него выше. Это происходит потому что блок с id="two" является дочерним элементом блока с id="one", который устанавливает новый порядок наложения содержимого.
- #three 12
- #two 10.15
- #one 10.0
Ошибка в Firefox
Мы все привыкли что Firefox хорошо поддерживает CSS, однако в этом случае это к сожалению не так. В соответствии со спецификацией CSS2.1, элемент не может быть расположен ниже фона своего родительского элемента. Представим что мы установили отрицательное значение z-index для блока с id="two". Содержимое блока с id="one" должно перекрыть блок с id="two", но фон должен остаться ниже. Результаты показаны на рисунке:
Мы видим что во всех сновных браузерах содержимое блока #one перекрывает блок с id="two", тогда как его фон остался на прежнем месте. В Firefox же ситуация иная: блок с id="one" полностью перекрывает блок с id="two". Будьте осторожны, применяя отрицательный z-index.
Заключение
Если вы чувствуете что вам этого мало, зайдите на сайт W3C, где детально описывается порядок наложения не только элементов, но и фона, фоновых изображения и границ. Как и большинство вещей в CSS, здесь есть над чем подумать…
Оригинал: Detailed Look at Stacking in CSS
Странно, что разработчики FireFox до сих пор не сделали поддержку отрицательного значения для z-index. Часто этого очень не хватает.
Хм, чисто с эмоционаьной точки зрения поведение FF кажется верным.
Мне тоже не хватает, но эту уж совсем другая история… и не хочу я понимать fox!!!
Читал про фоксовские глюки с цсс и не раз с ними сталкивался. Работаю с ЦМС и делаю сайты под ИЕ но тестю и на лисе. Не думаю что данный глюк уменьшит юзеров лисы.
Только вот не надо рассказывать что IE лучше чем FireFox!!! Наверное не даром не существует толковых заплаток стилей под Фокс, так как он нормально работает, в отличие от InternetExplorera!
У корпорации Майкрософт явные проблемы с отделом браузерна ИЕ — вышла восьмая версия IE 8 и уже создали заплатку, что бы 8 ая версия работала как 7 ая. Типа режим эмуляции отображения стилей. Встает вопрос, нахрен надо было выпускать тогда такую корявую 8 ую версию?
Самый толковый и безопасный браузер — это FireFox!
После идут Safari, Opera
Chrom от Гугла «хромает», не даром так назвали.
И только в конце плетется ненависный IE по всем параметрам. Единственный его большой плюс — это сглаживание шрифтов, даже лучше чем в Сафари! Но это единственный плюс. Во всем остальном он проигрывает!
Кто то скажет: там намного больше программных возможностей!!! А кому нужны эти возможности, если сайт не будет нормально работать в FireFox Opera Safari у других пользователей, которых уже больше чем тех кто на ИЕ! Это же бред отсеивать этих посетителей, потому что у них стоят нормальные браузеры.
Писать нормальные CMS надо, товарищи программисты — кроссбраузерные! И не лениться!
А где вы усмотрели представление IE лучше нежели FF?
Павел, вы какие-то очень интересные вещи говорите!
FF чуть ли не глючнее, чем IE. Ужасно дырявое и кривое создание.
А про существование acid3.acidtests.org тестов вы слышали?
Между прочим, по результатам этих тестов Opera 10 и Хромой набирают по 100 баллов, в отличае даже от FF 3, которорый набирает 72.
Про сафари ничего сказать не могу..
Так что зря вы недолюбливаете Oper’у и Chrome
Спасибо за урок, срочно пригодился
Я честно сказать ни чего не понял! Этот урок походу не для начинающего!
Не могли бы вы пожалуйста подсказать мне в чем проблема здесь http://dl.dropbox.com/u/20559449/crossbr/OverSky/forms.html . Выпадающее меню прячеться под изображения, хотя z-index я ему уже поставил 999. У каритинки стоит z-index:2. Я уже неделю, не могу разобраться.
Возможно вы где-то не закрыли тег, поэтому порядок наложения сбился.
Во блин. Исправил. Оказывается блоку с контентом надо было поставить z-index:0. Хрен бы догадался если бы не сжал код в три дули.
Спасибо.
спасибо за статью, очень помогла!
а мне надо было просто присвоить position Элементам, чтобы они отображались в нужной последовательности.