Большинство свойств 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-индекса; их порядок наложения является естественным или составным правилом по умолчанию. Явление переплетения вызвано отрицательными полями.