157. Свойство z-index для определения уровня элемента — Позиционирование — codebra
Введение
Свойство z-index широко применяется в CSS и помогает решить множество проблем в процессе верстки макета. На первый взгляд простое свойство z-index имеет свои нюансы, незнание которых приводит к беспричинным беспокойствам и вопросу: «Почему ничего не работает?». Для начала определим, что оно делает. Свойство z-index устанавливает уровень элемента, т.е. порядок наложения элементов одного на другие. Оно имитирует третье пространство: z-плоскость. Чтобы понять выше сказанное, приведу наглядный пример, автором которого является Луи Лазарис (канадский веб-разработчик). На рис. 1 изображена z-плоскость.
Рис. 1. Третье пространство в CSS
Самая распространенная ошибка, это незнание того, что свойство z-index работает, только если для свойства position установлены значения fixed, absolute или relative.
Далее рассмотрим синтаксис:
Код CSS
z-index: число | auto | inherit
В качество значений могут использоваться ноль, положительные и отрицательные числа. Чем значение больше, тем выше находится элемент (или правее, если рассматривать рис. 1). Если для двух элементов свойство z-index имеет равное значение, то ниже (на заднем плане) будет расположен тот, который в коде написан выше. Для значения auto, порядок элементов устанавливается в зависимость от порядка их написания в коде.
Как располагаются элементы
Несколько пунктов, которые влияют на обычное расположение элементов, при условии не использования свойства z-index.
- Применение свойства position;
- Фон и границы элемента;
- Строчные элементы в порядке отображения.
Как применять свойство z-index
Рассмотрим следующий HTML код:
Код HTML
<div class = "green"></div>
<div class = "red"></div>
И CSS код:
Код CSS
.red {
width: 200px;
height: 200px;
background: red;
position: relative;
}.green {
width: 100px;
height: 100px;
background: green;
position: relative;
margin: 0 0 -150px 50px;
}
red {Необходимо обратит внимание в HTML коде на то, что зеленый квадрат записан раньше, чем красный. В CSS коде на то, что для обоих блоков заданы свойства position: relative. Следовательно, элементы расположатся в естественном порядке, и красный блок перекроет зеленый. Чтобы зеленый блок оказался сверху, необходимо немного изменить CSS код, добавив одну строчку:
Код CSS
.green {
width: 100px;
height: 100px;
background: green;
position: relative;
margin: 0 0 -150px 50px;
z-index: 1;
} В данном случае z-index приведен для примера, чтобы понять, как он работает. Намного проще было бы убрать position: relative у красного блока, чтобы добиться того же результата.
Похожие уроки и записи блога
Свойство background для работы с фономЦвета и фон
Первое знакомство с PythonЗнакомство с Python
Знакомимся с Flexbox в CSSЗнакомство с Flexbox
Основы объектно-ориентированного программирования (ООП) в PythonЗнакомство с Python
Внутреннее устройство и сортировка словаря в PythonЗнакомство с Python
Обработка исключений (try/except) в PythonЗнакомство с Python
Модули в PythonЗнакомство с Python
Добавляем градиент к фону элементаЦвета и фон
Погружение в PythonЗнакомство с Python
Предыдущий урок «156. Изменяем свойствами left, top, right и bottom положение элемента» Следующий урок «158. Общая информация и форматирование таблиц»
Z-Index: позиционирование перекрывающих элементов с помощью CSS
Одна из проблем при использовании позиционирования 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-индекса.
Одна заметка: для элемента, эффективно использующего свойство z-index, он должен быть элементом уровня блока или использовать отображение в виде файла «block» или «inline-block» в вашем файле CSS.
CSS | z-index Property — GeeksforGeeks
Улучшить статью
Сохранить статью
- Последнее обновление: 04 Авг, 2022
Улучшить статью
Сохранить статью
Свойство z-index используется для смещения элементов по оси z, т. е. на экране или за его пределами. Он используется для определения порядка элементов, если они накладываются друг на друга.
Синтаксис:
z-индекс: авто|номер|начальный|наследовать;
Значения свойства:
- авто: Порядок стека равен порядку родителя (по умолчанию).
- номер: Порядок стека зависит от номера.
- начальный : Устанавливает для свойства значение по умолчанию.
- inherit: Наследует свойство от родительского элемента.
Пример 1:
html
3 |
Output:
Example 2:
html
|
0068 Output:
In the Example-1 z-индекс установлен на -1, поэтому изображение появляется за текстом, но в примере 2, когда z-индекс установлен на +1, изображение скрывает текст.
Поддерживаемые браузеры: Браузер, поддерживаемый z-index property are listed below:
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 4.0
- Apple Safari 1.0
Understanding Z Index in CSS
Поиск
Одной из наиболее распространенных проблем с визуальными элементами при разработке веб-сайта или макета является наложение или наложение элементов друг на друга. К счастью, у нас есть решение этой проблемы при проектировании в CSS — Z-Index .
Поначалу решение проблемы суперпозиции кажется трудным, потому что мы обычно рассматриваем паутину как двумерное пространство и представляем ее с шириной и высотой. Однако существует и другое измерение – глубина. Z-Index позволяет веб-разработчикам контролировать аспект глубины веб-сайта и позволяет нам воспринимать элементы, как если бы они были слоями.
Что такое Z-индекс в CSS?
В CSS свойство Z-Index определяет порядок стека элемента или элементов, которые должны отображаться на веб-странице. Если вы помните урок математики, Z в индексе Z здесь относится к оси Z трехмерного декартова графика координат, или x , y , z .
Просто представьте, что ваш монитор существует в трех измерениях, а ось Z простирается от вашего монитора к вам. Поскольку Z-индекс продолжает увеличиваться в размерах, он продолжает расширяться на к вам. Применение Z-Index с большим значением к элементу HTML по отношению к другому элементу HTML поместит первый элемент сверху, если они перекрываются.
Например, представьте, что у вас есть стопка листов бумаги. Лист бумаги с более высоким индексом Z будет находиться наверху стопки.
Естественный порядок наложения в CSS
Элементы HTML имеют естественный порядок наложения; если Z-индекс не применяется, то порядок размещения по умолчанию будет следующим:
Корневой элемент ()Непозиционные элементы в порядке их определенияПозиционированные элементы в порядке их определения
Непозиционные элементы — это элементы, для которых значение позиции по умолчанию равно static.
Позиционированные элементы — это те элементы, которые имеют любое значение положения, кроме статического. Возможные значения позиционируемых элементов: относительное , абсолютное , липкое или фиксированное .
При правильном применении Z-Index может изменить этот порядок наложения по умолчанию. Конечно, укладка элементов не имеет никакого значения, если только элементы не расположены так, чтобы они перекрывали друг друга.
Как сложить элементы в CSS с помощью Z-Index
Если мы хотим изменить порядок элементов по умолчанию на веб-странице, мы можем использовать свойство Z-Index. Элемент с более высоким Z-индексом будет отображаться перед элементами с более низким Z-индексом. Здесь следует помнить одну вещь: Z-Index работает только с элементами с позициями . Возможные значения позиционируемых свойств: position: absolute , относительный или sticky .
Ниже вы можете найти пример размещения элементов в CSS с использованием Z-Index:
.
blue {
фон: синий;
z-индекс: 1; /*Z-индекс синего прямоугольника ниже, чем у красного прямоугольника*/
/* другие стили… */
}
.красный {
фон: красный;
z-индекс: 2; /*Z-индекс красного прямоугольника больше, чем у синего прямоугольника, поэтому он отображается после синего прямоугольника*/
/* другие стили… */
}
Вывод этого кода:
Как видите, мы добавили свойство Z-Index к конфликтующим элементам. Элемент с наибольшим значением Z-Index отображается спереди. Вот почему блок Red отображается впереди, потому что он имеет более высокий Z-индекс, чем блок Blue .
Интуитивно, если поменять местами значения порядка, как в следующем примере CSS:
.blue {
фон: синий;
z-индекс: 2; /*Z-индекс синего прямоугольника больше, чем у красного прямоугольника*/
/* другие стили… */
}
.красный {
фон: красный;
z-индекс: 1; /*Z-индекс красного прямоугольника ниже, чем у синего прямоугольника, поэтому он отображается после синего прямоугольника*/
/* другие стили… */
}
Мы получаем следующий вывод:
Теперь блок Blue отображается впереди, потому что он имеет более высокий Z-индекс, чем блок Red .
Обратите внимание, что Z-Index принимает целочисленные значения (целые числа) от 1 до любого желаемого; Z-Index не принимает такие меры, как em или px . Допускаются только целые значения.
Использование Z-Index в CSS
Одной из путаниц, с которой сталкиваются новички при использовании Z-Index, является позиция имущество. Каждый элемент, который необходимо перепозиционировать с помощью Z-Index, должен иметь объявленное свойство position ; как мы уже обсуждали, возможные значения этого свойства: относительные , абсолютные и фиксированные
. За исключением значения по умолчанию static , с Z-Index можно использовать любое другое значение.Теперь давайте поговорим о некоторых предостережениях, которые следует соблюдать разработчикам при использовании Z-индекса:
- Перекрытие других элементов: Z-индекс — хороший вариант для проверки в случае, если ваши элементы полностью перекрываются, потому что они перекрываются с другими элементами.
- Отрицательное значение Z-индекса: значения Z-индекса должны быть положительными; однако отрицательные значения поддерживаются, но некоторые старые браузеры не поддерживают отрицательные значения, поэтому имейте в виду, если элемент ведет себя неадекватно или просто исчезает.
- Одинаковое значение для двух Z-индексов: не присваивайте одинаковое значение двум или более элементам, потому что вы не сможете сказать, какой элемент будет казаться ближе, а какой перекрывается.
Вот синтаксис этого свойства CSS Z-Index:
элемент {
позиция: абсолютная, относительная или липкая;
слева: значение;
верх: значение;
z-индекс: значение;
}
Когда следует использовать Z-индекс?
Веб-разработчики могут использовать свойство Z-Index во многих случаях в своих веб-приложениях, в том числе для перекрытия изображений в фотогалерее или во всплывающей подсказке. Вы также можете использовать его на панелях навигации и раскрывающихся меню или во всплывающем окне, которое появляется при наведении курсора или щелчке по элементу.