В CSS существует множество различных свойств, из них целая группа отвечает за смену позиционирования элемента. Большинство из них имеют немедленный результат, то есть, при обновлении страницы вы сразу же увидите изменения. Некоторые свойства зависят от определенных обстоятельств.
Как раз, таким свойством является "z-index". У многих начинающих веб-разработчиков возникают трудности с использованием этого свойства, оно само по себе кажется очень сложным. Однако если попрактиковаться в работе с ним, то вы обнаружите, что ничего трудного в использовании этого инструмента нет.
Прочитав эту статью вы узнаете о том, что такое "z-index", его главные функции, а также примеры использования данного свойства.
Описание свойства Z-Index. CSS & HTML
Свойство определяет уровень глубины в стеке всего HTML документа. По умолчанию, при использовании свойства {position: absolute}, используются 2 оси — X, Y. Свойство "z-index" определяет положение элемента по оси Z.
Все элементы имеют своё свойство "z-index" по умолчанию, которое зависит от различных факторов. Однако не к каждому свойству его можно применить.
Вот список свойств, к которым не применяется свойство "z-index":
- Фон и границы какого-либо элемента внутри документа. Фоновые изображения и границы являются 2х-мерными составляющими, поэтому имеют только 2 оси — X и Y.
- Элементы страницы, которые имеют отрицательный контекст во внешнем стеке.
- Элементы не имеющие позиционирования. Как правило, это элементы которым задано свойство {position: static} — не позиционирование или статическое позиционирование.
- Элементы, которые не обтекаются, то есть не имеют свойства "float". Сюда относятся элементы с заданным свойством "float: none".
- Блочные элементы — параграфы, заголовки, теги списков, таблицы и так далее. В общем, все элементы имеющие свойство "display: block".
- Сюда могут относиться также блочные и не позиционированные элементы, которые имеют активное свойство float.
- Строчные элементы — ссылки, изображения, теги форм, теги span и так далее. Распространяется на все элементы имеющие свойство "display: inline".
- Элементы с заданным позиционированием. Те, которые имеют свойство свойство "position: absolute".
Данный список содержит все элементы, которым не присваивается свойство z-index. Все они представлены в порядке отображения.
Самое главное — корректность применения. Если правильно применять свойство z index для HTML элементов, то можно изменить их расположение во внешнем стеке.
Что делать если z-index не работает? HTML & CSS
Сейчас мы ответим на вопрос большинства начинающих веб-разработчиков. Дело в том, что неопытные веб-программисты не знают, что свойство z-index работает не со всеми элементами. К ним относятся только те, кто имеет свойство {position: relative} или {position: fixed}.
Чтобы наглядно показать решение проблемы посмотрите на скриншот. Смотрите, мы установили 3 блока, которые расположены друг на друге.
Каждый из них имеет свойство "z-index": 1 — 5000, 2 — 1000, 3 — 100 По логике, первый блок должен отображаться поверх остальных, но почему-то этого не происходит.
Дело в том, что у нас не указано свойство position для блоков, а оно по умолчанию равно {position: static}. Заменим его на {position: relative} и наблюдаем результат.
#grey_box {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background: #ddd;
position: relative;
z-index: 5000;
}
#blue_box {
width: 200px;
height: 200px;
border: solid 1px #4a7497;
background: #8daac3;
position: relative;
z-index: 1000;
}
#gold_box {
width: 200px;
height: 200px;
border: solid 1px #8b6125;
background: #ba945d;
position: relative;
z-index: 100;
}
Только что вы увидели использование свойства "z-index" для создания CSS слоев. Их можно применять для создания уникальных элементов дизайна.
Использование свойства "z-index". Примеры
Существует множество вариантов использования данного свойства. Одним из них является создание фотогалереи на CSS3. Пример:
Вообще свойство "z-index" очень часто применяется в слоевой верстке сайтов. В отличие от стандартных свойств табличной верстки, данный инструмент расширяет возможности веб-мастеров в создании красивых дизайнов. Также он довольно удобен в создании общего макета сайта.
Пару слов о браузерах
Давайте теперь разберемся, как ведет себя "z-index" в разных браузерах. Например, в браузерах Internet Explorer версии 6 и 7, стековый контекст отображается неправильно.
Если запустить наш пример с 4 блоками в этом браузере, с уже заданным позиционированием, то эффект будет таким же, как если бы его не было.
В браузере Mozila Firefox, версии 2, слои тоже отображаются не совсем корректно. Проблема заключается в том, чем меньше значение свойства "z-index", тем больше вероятность того, что элемент будет находиться под остальными.
В версии Firefox 3 данный баг устранили, теперь свойство отображается корректно. То же касается и современных браузеров.
Теги: