Почему position: relative + z-index: 0 перекрывает position: fixed + z-index: 100?
Для того чтобы понять, почему position: relative + z-index: 0 перекрывает position: fixed + z-index: 100, необходимо разобраться в значениях свойств position и z-index.
Свойство position определяет, как элемент будет позиционирован на веб-странице. В данном случае, при использовании position: relative, элемент будет позиционироваться относительно своего исходного местоположения, оставляя свободное пространство под ним.
Свойство z-index определяет "глубину" элемента, то есть его порядок отображения относительно других элементов на странице. Значение z-index указывает приоритет элемента, где более высокое значение будет отображаться поверх элементов с более низким значением.
Теперь рассмотрим почему position: relative + z-index: 0 перекрывает position: fixed + z-index: 100.
В данном случае, значение свойства z-index для элемента с position: relative имеет значение 0, что означает его базовый порядок отображения. Вместе с тем, значение свойства z-index для элемента с position: fixed составляет 100, что указывает на его более высокий порядок отображения. Тем не менее, при позиционировании элемента с position: relative, он будет отображаться поверх элементов с базовым порядком отображения (z-index: 0), но все элементы с position: fixed будут отображаться поверх него, так как их значение z-index выше (z-index: 100).
Таким образом, элемент с position: relative + z-index: 0 перекрывает элементы с position: fixed + z-index: 100 из-за их разных методов позиционирования и значения z-index.
Если вам требуется, чтобы элементы с position: fixed и position: relative были правильно перекрыты, рекомендуется увеличить значение z-index элемента с position: fixed, чтобы задать ему более высокий порядок отображения.