Потому что мы интуитивно думаем, что веб-страницы HTML являются двухмерными, поскольку текст, изображения или другие элементы расположены по порядку. Однако реальная веб-страница трехмерна, и между элементами может возникнуть наложение (перекрытие). через CSS Свойство z-index устанавливает порядок расположения элементов.
1. Значение атрибута z-index
Порядок наложения элемента в документе, используемый для подтверждения уровня наложения элемента в текущем контексте наложения. Элементы с более высоким порядком наложения всегда будут отображаться перед элементами с более низким порядком наложения.
(1) Чем выше значение атрибута z-index, тем оно выше.
(2) Элементы могут иметь отрицательные значения атрибута z-index.
(3) z-индекс и конкретные цифры.
(4) Значение z-индекса не соответствует единице измерения.
Как показано ниже:
Как показано на рисунке выше, имя этого свойства происходит от системы координат, где ось X проходит слева направо, а ось Y — сверху вниз. От экрана к пользователю проходит ось Z. В этой системе координат элементы с более высоким значением z-индекса находятся ближе к пользователю, чем элементы с более низким значением z-индекса, то есть элементы с более высоким значением z-индекса первыми отображаются в поле зрения пользователя. , что приводит к тому, что элементы с высокими значениями z-index дольше перекрывают другие элементы, что также называется укладкой или укладкой.
Вы можете создавать более сложные макеты веб-страниц с помощью атрибута z-index. Необязательные значения атрибута z-index показаны в следующей таблице:
В отношении иерархических отношений элементов следует отметить следующие моменты:
(1) Для элементов, атрибут позиции которых не установлен или когда значение атрибута позиции является статическим, элемент, определенный позже, перезапишет предыдущий элемент;
(2) Для элементов, у которых установлен атрибут позиции и значение атрибута не является статическим, эти элементы перезапишут элементы, у которых не установлен атрибут позиции или чье значение атрибута позиции является статическим;
(3) Для элементов, значение атрибута положения которых не является статическим и для которых определен атрибут z-index, элементы с большим значением атрибута z-index будут перезаписывать элементы с меньшим значением атрибута z-index, то есть чем больше значение атрибута z-index. Значение атрибута -index, тем выше приоритет. Высокий, если значения атрибута z-index одинаковы, элементы, определенные позже, перезапишут ранее определенные элементы;
(4) Атрибут z-index эффективен только в том случае, если элемент определяет атрибут позиции и значение атрибута не является статичным.
2. случай применения z-index
Пример:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>CSSz-index</title><styletype=text/css>div{width:200px;height:200px;text-align:center; font-size:50px;line-height:200px;position:absolute;}#red{left:100px;top:100px;}#green{left:200px;top:200px;</style></head>< body><!--Принцип каскадирования Z-индекса: 1. Для элементов одного уровня (или позиции: static) по умолчанию элементы в конце потока документов перезаписывают предыдущие. (Идет сзади) 2. Для элементов одного уровня, если позиция не статична и существует z-индекс, то элемент с большим z-индексом перекроет элемент с меньшим z-индексом, то есть больший z-индекс, тем выше приоритет. --><divid=redstyle=background:red;z-index:0;>A</div><divid=greenstyle=background-color:green;>B</div><divid=bluestyle=background-color: blue;z-index:-1;>C</div></body></html>Результаты запуска:
Некоторые недоразумения относительно z-index
Обычно мы говорим, что атрибут z-index работает только при использовании с позиционированными элементами (элементами, положение которых не является статическим). Прежде всего, это утверждение неверно, поскольку в CSS3 также могут использоваться дочерние элементы гибкого поля. . Установите атрибут z-index.