👨🏻‍💻 Объясните, что такое z-index и как формируется контекст наложения. Любой элемент в HTML документе может быть либло на переднем, либо на заднем плане. Если свойства z-index и позиционирование не заданы явно, то порядок наложения равен порядку следования элементов в HTML. Если позиционирование элементов (и их детей) указано явно, то такие элементы будут перекрывать собой элементы без явно заданного свойства позиционирования. Если задан z-index. Во-первых, z-index учитывается только на явно позиционированных элементах. Если попытаться установить z-index на непозиционированный элемент, то ничего не произойдет. Во-вторых, значения z-index могут создавать контекст наложения. Контекст наложения Элементы с общими родителями, перемещающиеся на передний или задний план вместе, известны как контекст наложения. Контекст наложения имеет свой корневой элемент в HTML структуре. В момент формирования нового контекста на элементе все дочерние элементы также попадают в этот контекст и занимают своё место в порядке наложения. Если элемент располагается в самом низу одного контекста наложения, то никаким образом не получится отобразить его над другим элементом в соседнем контексте наложения, располагающимся выше по иерархии, даже с установленным z-index равным миллиону. Новый контекст может быть сформирован в следующих случаях: Если элемент — корневой элемент документа Если элемент позиционирован не статически и его значение z-index не равно auto. Если элемент имеет прозрачность менее 1. Порядок наложения: Background и border элемента. Позиционированные элементы и его дети с z-index < 0. Элементы блочного уровня в нормальном потоке, то есть у которых position = static. Плавающие(float) элементы. inline-элементы. Элементы с z-index = 0 или auto. Элементы со свойством opacity < 1. Frontend Головного Мозга