CSS z-index: полный обзор, свойства

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

css z index

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


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

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

css z index

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

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

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


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

css z index

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

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

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

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

css position absolute z index

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

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

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

z index css

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

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


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

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

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

css z index не работает

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

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

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

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

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

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

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

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

css background 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) в форме варианта «сайтостроения» - лучшее подтверждение того, что плоские прямоугольные формы и сухой, но предельно четкий контент - тоже хорошо и практично. Но следует отметить, что сайты компаний-монополистов остались при своем: главное - лицо компании, ее функциональность и производственная мощь. Монстры информационных технологий сочли, что посадочные страницы - это лицо мелкого бизнеса, аксессуаров, гербалайфа и прочей «бижутерии».

html css z index

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

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

css position absolute z index

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

jquery css z index

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

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

Свойство CSS opacity: управление прозрачностью
Изменение прозрачности элементов с помощью свойства CSS opacity. Примеры использования, интервал возможных значений, наследование. Управление прозрачностью дочерних узлов. Взаимодействие с невидимыми блоками. Другие CSS-свойства, влияющие на ...
далее
CSS Position: примеры
Свойство Position дарит полный контроль над положением элементов на странице. Однако в обилии его значений легко запутаться. Как работает каждое из них?
далее
CSS: псевдоэлементы и псевдоклассы
Временами кажется, что для того, чтобы выжить в современном мире, необходимо знать, как создавать сайты. Даже в школах обучают основам HTML. Но для создания качественного ресурса этого мало. Необходимо еще знать основы каскадной таблицы стилей, в ...
далее
JQuery-слайдеры изображений: примеры
Слайдер на сайте - один из важнейших элементов. Он помогает выделить важную информацию и привлекает внимание посетителя. Готовые плагины упрощают разработку слайдера и ускоряют время создания сайта в целом.
далее
Применение CSS по центру: текст и таблица
Оформление элементов HTML страницы удобнее всего выполнять чистым CSS стилем. Знание правил и нюансов позволяет решить вопрос кроссбраузерности, выполнить работу быстро и эффективно.
далее
Свойство css прозрачность - простой способ сделать дизайн сайта интереснее
Для того чтобы сделать сайт непохожим на другие, привлечь внимание посетителей и направить его на те или иные элементы, используется огромное количество способов и инструментов. Среди них имеется очень популярное свойство css - прозрачность. Эта техника довольно модная и эффектная, а потому применяется часто.
далее
Свойство css прозрачность - простой способ сделать дизайн сайта интереснее
CSS-тень: как изготовить
Без тьмы нет света, без тени нет формы. Материал, изложенный ниже, поможет вам научиться устанавливать тень для блока или картинки при помощи CSS-кода.
далее
CSS-тень: как изготовить
Модальное окно jQuery - для чего нужно и как правильно установить
В статье раскрывается понятие модального окна jQuery и на одном примере показывается, как установить его на сайт.
далее
Модальное окно jQuery - для чего нужно и как правильно установить
Before CSS - оригинально, удобно, практично
Псевдоклассы и псевдоэлементы CSS дают возможность оказать стилевое влияние на страницы сайта, не затрагивая его контент. Динамика дизайна посредством статического описания style на элементе или файле таблицы стилей упрощает программный код сайта.
далее
Before CSS - оригинально, удобно, практично
Стилизация элемента placeholder в CSS
Плейсхолдер - элемент поля ввода, в котором можно разместить подсказку. Когда пользователь начинает вводить данные, вспомогательный текст пропадает, чтобы не мешать. Каждый браузер имеет свое мнение на счет того, как следует отображать этот элемент, и порой дефолтные стили ломают весь дизайн. Чтобы управлять ими, требуется воспользоваться специальным правилом CSS placeholder.
далее
Стилизация элемента placeholder в CSS