Одна из проблем при использовании позиционирования CSS для макета веб-страницы заключается в том, что некоторые из ваших элементов могут перекрывать другие. Это прекрасно работает, если вы хотите, чтобы последний элемент в HTML был сверху, но что, если вы этого не сделаете, или что, если вы хотите, чтобы элементы, которые в настоящее время не перекрывали другие, делали это, потому что дизайн требует такого «многоуровневого» вида ? Чтобы изменить способ перекрытия элементов, вам нужно использовать свойство z-index CSS.
Если вы использовали графические инструменты в Word и PowerPoint или более надежном графическом редакторе, таком как Adobe Photoshop, скорее всего, вы видели что-то вроде z-index в действии. В этих программах вы можете выделить объекты, которые вы нарисовали, и выбрать опцию Отправить обратно или же На передний план определенные элементы вашего документа. В Photoshop у вас нет этих функций, но у вас есть панель «Слой» программы, и вы можете расположить элемент на холсте, переставив эти слои. В обоих этих примерах вы по существу устанавливаете z-индекс этих объектов.
Что такое Z-индекс?
Когда вы используете позиционирование CSS для позиционирования элементов на странице, вам нужно думать в трех измерениях. Существует два стандартных размера: слева / справа и сверху / снизу. Индекс слева направо известен как x-индекс, а сверху вниз — y-индекс. Вот как вы должны расположить элементы по горизонтали или по вертикали, используя эти два индекса.
Когда дело доходит до веб-дизайна, существует также порядок размещения страниц. Каждый элемент на странице может быть размещен выше или ниже любого другого элемента. Свойство z-index определяет, где в стеке находится каждый элемент. Если x-index и y-index — горизонтальные и вертикальные линии, то z-index — это глубина страницы, по сути, 3-е измерение.
Думайте об элементах веб-страницы как о кусочках бумаги, а саму веб-страницу — как о коллаже. Место, где вы кладете бумагу, определяется позиционированием, и насколько она покрыта другими элементами, является z-индексом.
- Z-индекс представляет собой число, либо положительное (например, 100), либо отрицательное (например, -100).
- По умолчанию z-index равен 0.
Элемент с самым высоким z-индексом находится сверху, затем следует следующий самый высокий и так далее до самого низкого z-индекса. Если два элемента имеют одинаковое значение z-index (или оно не определено, что означает использование значения по умолчанию 0), браузер будет размещать их в порядке, в котором они отображаются в HTML.
Как использовать Z-Index
Дайте каждому элементу в вашем стеке различное значение z-index. Например, если у вас есть пять разных элементов:
- элемент A — z-индекс -25
- элемент B — z-индекс 82
- элемент C — z-индекс не установлен
- элемент D — z-индекс 10
- элемент E — z-индекс -3
Они будут складываться в следующем порядке:
- элемент Б
- элемент D
- элемент С
- элемент Е
- элемент А
Рекомендуется использовать совершенно разные значения z-index для укладки ваших элементов. Таким образом, если вы добавите больше элементов на страницу позже, у вас будет пространство для их наложения без необходимости регулировать значения z-index всех других элементов. Например:
- 100 для вашего самого верхнего элемента
- 0 для вашего среднего элемента
- -100 для вашего нижнего элемента
Вы также можете присвоить двум элементам одинаковое значение z-index. Если эти элементы сложены, они будут отображаться в том порядке, в котором они написаны в HTML, с последним элементом сверху.
Чтобы элемент эффективно использовал свойство z-index, он должен быть элементом уровня блока или использовать отображение «block» или «inline-block» в вашем файле CSS.
