tgoop.com/startpoint_dev/42
Last Update:
💣 Разбираемся с особенностями CSS-свойства z-index
CSS-свойство z-index используется для управления порядком перекрытия элементов вдоль оси z (ось, перпендикулярная экрану). Это свойство определяет, какой из элементов находится "поверх" других, когда они находятся на одном и том же месте в документе или перекрываются.
Как работает z-index:
1. Применение: z-index может быть применён только к элементам, у которых задано свойство position со значением, отличным от static. Например, relative, absolute, fixed или sticky.
2. Числовые значения: Чем выше значение z-index, тем выше "слой", на котором будет находиться элемент. Значения могут быть положительными или отрицательными.
3. Локальная контекстная наложенность: z-index работает в рамках одного контекста наложения. Есть несколько способов задать новый контекст наложения, но об этом мы поговорим немного позже. Здесь важно понимать, что элемент с z-index: 1000 не перекроет элемент с z-index: 5, если они находятся в разных контекстах наложения.
Примеры:
Элемент с бо́льшим значением z-index будет перекрывать элемент с меньшим значением, если они расположены в одном контексте наложения:
<div style="position: relative; z-index: 1;">
<div style="position: absolute; z-index: 2;">Перекрывает</div>
<div style="position: absolute; z-index: 1;">Перекрываемый</div>
</div>
Элемент с отрицательным
z-index может быть расположен под базовым уровнем своего контекста. Например, через него можно явно указать, что элемент будет фоном внутри своего родителя:
<div style="position: relative">
<div style="position: absolute; z-index: -1">Содержимое фона</div>
Основное содержимое блока
</div>
🔗 Подробнее про
z-index на MDN.BY Настя Котова // Frontend & Node.js
Share with your friend now:
tgoop.com/startpoint_dev/42