Источник перевода: блог Hallmaster
Очень хороший технический документ, переведенный из статьи « Свойство CSS Z-Index: комплексный взгляд », опубликованной Луи Лазарисом 15 сентября 2009 года. Я считаю, что он поможет многим фанатикам фронтенда, таким как я!
Все авторские права принадлежат оригинальному автору.
Статья на EN не очень хорошая, любая критика приветствуется.
-------------------------------------------------- ------
Большинство свойств CSS просты в использовании. Часто, когда вы используете свойства CSS для элементов языка разметки, результаты появляются сразу после обновления страницы. Другие свойства CSS более сложны и будут работать только при определенных обстоятельствах.
Атрибут Z-index принадлежит к последней группе, упомянутой выше. Z-индекс, несомненно, вызывает замешательство (совместимость) и разочарование (психология разработчиков) чаще, чем любой другой атрибут. Но забавно то, что как только вы действительно поймете Z-index, вы обнаружите, что это очень простое в использовании свойство, которое оказывает мощную помощь в решении многих проблем с макетом.
В этой статье мы подробно объясним, что такое Z-индекс, почему его так плохо понимают, а также обсудим некоторые практические вопросы, связанные с его использованием. Мы также опишем некоторые различия между браузерами, с которыми вы столкнетесь, а также уникальные проблемы, существующие в существующих версиях IE и Firefox. Этот всесторонний взгляд на атрибут Z-index предоставит разработчикам хорошую основу для уверенности и мощную помощь при использовании атрибута Z-index.
Что это?
Атрибут Z-index определяет уровень стекирования HTML-элемента. Уровень наложения элемента зависит от положения элемента на оси Z (в отличие от оси X или оси Y). Более высокое значение Z-индекса означает, что элемент будет ближе к началу в порядке наложения. Эта последовательность наслоений представлена вдоль вертикальных осей резьбы.
Чтобы дать более четкое представление о том, как работает Z-индекс, на изображении выше визуальное расположение сложенных элементов преувеличено.
естественная последовательность слоев
На HTML-странице естественный порядок наложения (то есть порядок элементов по оси Z) определяется многими факторами. Ниже приведен список, в котором элементы списка отображаются в контексте стекирования (подходящего перевода на китайский язык пока не найдено, он должен относиться к среде стекирования, в которой расположены элементы стека). Эти элементы находятся в этом контексте стекирования. окружающей среды. Ни одному из элементов в этом списке не присвоен атрибут Z-index.
Фон и граница элемента создают контекст наложения.
Цитировать:
·Элементы контекстов наложения с отрицательными значениями располагаются в порядке появления (чем позже уровень, тем он выше)
· Элементы уровня блока, которые не позиционируются и не плавают, располагаются в порядке появления.
·Непозиционированные плавающие элементы расположены в порядке появления.
·Встроенные элементы расположены в порядке появления.
·Расположенные элементы расположены в порядке появления.
Свойство Z-index при правильном использовании меняет естественный порядок наложения.
Конечно, порядок расположения элементов не особенно очевиден, если только они не перекрывают друг друга. Ниже показан BOX с отрицательными полями, иллюстрирующий естественную последовательность укладки.
Приведенный выше BOX имеет разные цвета фона и границ, а последние два расположены в шахматном порядке и определяют отрицательное верхнее поле, поэтому мы можем видеть естественный порядок расположения. Серая КОРОБКА стоит на первом месте в знаке, синяя КОРОБКА на втором месте, а золотая на третьем. Примененные отрицательные поля ясно указывают на тот факт, что для этих элементов не установлено свойство Z-индекса; их порядок наложения является естественным или составным правилом по умолчанию. Явление переплетения вызвано отрицательными полями.