Entrevista de Frontend - JS HTML CSS

Какой элемент будет рисоваться выше других? Или ниже остальных? Решает браузер по определённым правилам. Контекст наложения — это концепция трёхмерного расположения элементов по оси 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