Когда вы задаете элементу свойство position: absolute, он выходит из обычного потока документа и позиционируется относительно ближайшего родительского элемента с позиционированием, которому задано значение, отличное от static. Если у родительского элемента нет позиционирования, то элемент position: absolute позиционируется относительно корневого элемента документа.
В вашем случае, если элемент с классом .main-block__container-background является родительским для элемента с классом .main-block__background-elem, то позиционирование элемента .main-block__background-elem будет относительно его родительского элемента .main-block__container-background.
Однако, чтобы элемент .main-block__background-elem не "перескакивал" поверх других элементов на вашем сайте, вам нужно убедиться, что у других элементов на странице либо также задано позиционирование, либо им задан более высокий z-index.
Вы можете попробовать выполнить следующие изменения:
Добавьте position: relative для родительского элемента .main-block__container-background, чтобы установить контекст позиционирования для дочернего элемента .main-block__background-elem:
.main-block__container-background {
position: relative;
}
Установите z-index для элемента .main-block__background-elem с более низким значением, чтобы он оставался позади других элементов на странице. Например:
.main-block__background-elem {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
Установка отрицательного значения z-index (z-index: -1) поможет поместить элемент позади остальных элементов на странице.
Если после этих изменений элемент .main-block__background-elem все еще находится выше других элементов, то возможно, у других элементов также задано позиционирование или z-index, которые могут влиять на их отображение. В таком случае, вам придется проверить их стили и, при необходимости, настроить z-index для этих элементов таким образом, чтобы они располагались корректно в стеке слоев.
