Выбор ответа Middle Позиционирование и z-index спрашивают часто обновлено
z-index: 9999 внутри контекста наложения
Вопрос
Окажется ли .popup поверх .b?
<div class="a" style="position: relative; z-index: 1">
<div class="popup" style="position: absolute; z-index: 9999">Попап</div>
</div>
<div class="b" style="position: relative; z-index: 2">Блок</div>
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Нет: .popup заперт в контексте наложения .a, а .a ниже .b. .a с position: relative и z-index: 1 создаёт контекст наложения.
Варианты ответа
- Да: 9999 больше 2, а
z-indexсравниваются по всей странице - Да: абсолютные элементы всегда рисуются поверх относительных соседей
- Нет:
.popupзаперт в контексте наложения.a, а.aниже.bправильный ответ - Нет:
z-indexу абсолютного элемента внутри относительного игнорируется
Разбор
.a с position: relative и z-index: 1 создаёт контекст наложения. Внутри него .popup сортируется только с соседями по контексту, а снаружи весь .a стоит на уровне 1, то есть под .b с уровнем 2. Сравнение 9999 и 2 не происходит, они в разных стопках. Абсолютные элементы не имеют приоритета над относительными. z-index у попапа работает, просто внутри своего контекста.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.