Выбор ответа Junior Позиционирование и z-index обновлено
Почему z-index не срабатывает
Вопрос
Блок в обычном потоке, display: block, у него z-index: 10, но соседний блок с position: relative его перекрывает. В чём причина?
.a { z-index: 10; }
.b { position: relative; margin-top: -20px; }
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: z-index не действует на position: static вне flex- и grid-контейнера. У static-блока вне flex- и grid-контейнера z-index игнорируется, а позиционированный сосед рисуется поверх обычных блоков.
Варианты ответа
z-indexне действует наposition: staticвне flex- и grid-контейнераправильный ответ- Нужно значение больше 10, например 9999, чтобы перебить соседа
z-indexработает только у элементов сposition: absolute- Сосед перекрывает, потому что стоит в DOM раньше и рисуется выше
Разбор
У static-блока вне flex- и grid-контейнера z-index игнорируется, а позиционированный сосед рисуется поверх обычных блоков. Число здесь ни при чём. z-index работает у любого позиционированного (relative, absolute, fixed, sticky), а не только у absolute. И .b идёт в DOM позже, а не раньше; при равных условиях выше как раз более поздний.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.