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