Question 1

Что такое CSS z-index?

Accepted Answer

CSS z-index управляет порядком вертикального стека позиционированных элементов. Элементы с более высоким z-index отображаются перед элементами с более низким z-index при перекрытии.

Question 2

Почему мой z-index не работает?

Accepted Answer

z-index работает только для позиционированных элементов (position: relative, absolute, fixed или sticky). Элементы с position: static игнорируют свойство z-index.

Question 3

Что такое контекст стека?

Accepted Answer

Контекст стека — это элемент, создающий собственный слой стека. Свойства opacity < 1, transform и filter создают новые контексты стека.

Question 4

Какие значения z-index обычно используются в UI?

Accepted Answer

Распространённые значения: 0 для базового контента, 10-100 для карточек и выпадающих меню, 1000 для модальных окон и оверлеев, 9999 для подсказок и уведомлений.

Question 5

Следует ли использовать очень высокие значения z-index, такие как 9999999?

Accepted Answer

Нет. Использование произвольно высоких значений затрудняет обслуживание. Определите шкалу z-index в вашей дизайн-системе (например, 10, 100, 200, 500, 1000) и используйте её последовательно.

Менеджер Z-Index

Список слоёв

Предпросмотр

Часто задаваемые вопросы

Comments & Feedback