🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Какой элемент будет рисоваться выше других? Или ниже остальных? Решает браузер по определённым правилам.
Контекст наложения — это концепция трёхмерного расположения элементов по оси z относительно пользователя, смотрящего на экран.
Самый базовый контекст наложения, существующий на любой странице формируется корневым элементом . Все элементы внутри этого контекста сортируются и располагаются с оглядкой друг на друга.
Но мы можем создавать контексты наложения не только на странице целиком, но и в каждом отдельном блоке. Тогда вложенные в него дочерние блоки будут сортироваться и располагаться уже по правилам этого нового, родительского контекста наложения.
Новый контекст наложения формируется если:
1. это корневой элемент (),
2. элемент позиционирован абсолютно (position: absolute) или относительно (position: relative) со свойством z-index, значение которого не auto,
3. флекс-элемент со свойством z-index, значение которого не auto и чей родительский элемент имеет свойство display: flex или display: inline-flex,
4. элементу задано свойство opacity со значением меньше 1,
5. элементу задано свойство transform со значением не none,
6. элементу задано свойство mix-blend-mode со значением не normal,
7. элементу задано свойство filter со значением не none,
8. элементу задано свойство isolation со значением isolate,
9. элемент с position: fixed,
10. элементу задано свойство will-change или аналогичный атрибут,
11. элементу задано свойство -webkit-overflow-scrolling со значением touch.
Остальные элементы, не создающие собственный контекст наложения, используют родительский контекст.
Обычно достаточно запомнить первые три сценария и чуть-чуть помнить про следующие два. Если браузер рисует что-то, чего вы не ожидали, можно всегда вернуться и подсмотреть остальные.
👉 @frontendInterview