CSS z-index: обзор, свойства

Правило CSS z-index - позиция элемента страницы по координате Z: уровень отображения элемента или слой, в котором он находится. Тег, у которого z-index больше, будет отображаться в полном объеме. Теги отображаются по порядку их следования во входящем потоке и накладываются друг на друга. Значение z-index определяет приоритет видимости.

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

Общее правило: порядок и уровень

Входной поток (страница, сформированная сервером) читается браузером последовательно. Все теги отображаются в соответствии с правилами CSS и могут накладываться друг на друга.

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

Правило видимости

Браузеры соблюдают правило видимости исключительно «честно». Придумать алгоритм, по которому можно оптом проанализировать все наложения и применить только те, которые реально пересекаются без учета тех участков, которые поглощаются каждым следующим элементом, - очень сложно.

В большинстве случаев это не нужно. Современное оборудование работает очень быстро, и заметить перерисовку элемента до того момента, когда ее перекроет следующий элемент, очень проблематично.

Влияние на последовательность элементов

Достаточно у третьего тега scCSS3 увеличить значение z-index, а у scCSS4 - его уменьшить, как общая картинка изменяется. При этом последовательность следования элементов в потоке остается прежней:

• div id='scCSS1';
• div id='scCSS2';
• div id='scCSS3';
• div id='scCSS4'.

Следует обратить внимание на то, что вторая картинка на самом деле занимает больше места, чем кажется. Третья картинка тоже. Кроме того, она состоит из двух частей (два яйца), находящихся на расстоянии друг от друга.

Реальные размеры областей, которые занимают вторая и третья картинки, выделены желтым и серым цветами соответственно.

Совмещение z-index с background-color

Следует обратить внимание, что свойства CSS background & z-index дополняют друг друга. Все блочные элементы, да и любые другие, всегда занимают прямоугольную область, образуемую максимальной высотой и максимальной шириной содержимого.

Используя изображения, можно придать любую форму области элемента, но вокруг него всегда будет прямоугольник. Это факт, который важно правильно учитывать.

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

Использование свойства CSS z-index в элементе, которого background-color имеет значение transparent (своего рода прозрачность), позволяет эмулировать любой контур элемента. Хотя в любом случае в реальности элемент будет прямоугольным.

События и видимость элемента

В местах, где элемент перекрыт другим элементом, события на нем работать не будут. По общему правилу, если элемент вне зоны видимости, он также вне зоны доступности.

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

Поскольку события, с пользовательской точки зрения, можно разделить на имеющие значение и не имеющие такового, то последние (перемещение мышки, случайное нажатие кнопки на клавиатуре, сигнал таймера) можно использовать для адекватного изменения контента в окне браузера.

Простой пример: посетитель переместил указатель мыши на элемент меню, но еще не принял решение что-либо сделать. Разработчик мог бы предусмотреть это событие, отследить движение к нужной точке диалога (клик - посетитель принимает решение) и отобразить адекватный контент. Правило CSS z-index как нельзя лучше подходит для такого случая.

Формат изображений

Поскольку изображения являются важным строительным материалом для любого сайта (красота, современность, функциональность - уже привычная норма вещей), большое значение имеет выбор формата для изображений.

По большому счету можно использовать все многообразие действующих форматов, но с точки зрения практичности и эффективности вполне разумно ограничиться *.png для статичных изображений и *.gif - для анимированных картинок. Популярный *.jpg также хорош, но он не позволяет гибко манипулировать пространством отображения.

Ошибки браузера и разработчика

Не так часто возникает ситуация, когда CSS z-index не работает, но такое случается. Правила таблицы каскадных стилей работают всегда, а объем стилевого файла часто достигает значительных объемов. Когда что-то не так отображается или просто нет того, что должно быть, нужно сначала проверить собственный код, потом очистить кэш браузера и опять проверить собственный код.

Интерпретируя HTML и CSS, браузер практически не допускает ошибок - это аксиома. Если нужного элемента нет, значит, в конструкции CSS {position:absolute; z-index: 112233; left:10px; top:20px; ...} что-то пропущено или записано не так.

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

Стиль должен быть указан в стиле класса или идентификатора. Указывать стиль на элементе следует только в исключительных случаях.

Использование jQuery.css(z-index, 123) также может привести к ошибке, если применено не к тому классу или идентификатору. Кроме того, jQuery - действительно замечательный инструмент разработчика. Однако прежде чем его применять, не помешает подумать: нельзя ли обойтись подручными средствами HTML/CSS, z-index - не такое правило, которое не нуждается в пристальном внимании.

Правильные слои и логичное перемещение

Идеальная страница - плоская. Во всяком случае до реального объемного изображения в массовом масштабе далековато, да и нет в этом особенной необходимости. Современные сайты - это реальная практика, реальные задачи. Они просто должны работать, ну а плоские демонстрируют объемное изображение.

К слову, явление посадочных страниц (landing page) в форме варианта «сайтостроения» - лучшее подтверждение того, что плоские прямоугольные формы и сухой, но предельно четкий контент - тоже хорошо и практично. Но следует отметить, что сайты компаний-монополистов остались при своем: главное - лицо компании, ее функциональность и производственная мощь. Монстры информационных технологий сочли, что посадочные страницы - это лицо мелкого бизнеса, аксессуаров, гербалайфа и прочей «бижутерии».

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

Отличное решение - AJAX (страница обновляется по мере надобности). Еще более перспективное решение, когда страница показывает то, что необходимо в данной точке окна браузера.

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

Обычно разработчик выбирает любимое число и дает его всем тегам подряд, а тем, которым нужно как-то выделиться, назначает следующее число. Придавать значение слоям и уровням страницы - не особенно прогрессивная и перспективная практика.

Однако если перенести семантику z-index в область диалога с посетителем, то можно создать практичный эффект. Аналогично тому, как теги могут накладываться друг на друга, можно наложить диалоги (сайт-посетитель) и выполнить перемещение между ними. С этой точки зрения применение правила CSS z-index представляется очень целесообразным и практичным.