Почему при написании в стилях «Position: absolute» он становится выше других элементов на сайте?

Question

[NikitaSemenov21]

Всех приветствую, можете пожалуйста объяснить почему у меня при написании в стилях "Position: absolute" он становится выше других элементов на сайте, z-index не помогает и что нужно сделать чтобы он не перескакивал в самый верх?
Вот код HTML:

<main role="main" class="main-block">
        <div class="main-block__container">
            <div class="main-block__text-container">
                <h1>Добро пожаловать в мир премиальных тракторов и комплектующих!
                </h1>
                <h5 class="main-block__description">В "Элитные Тракторы" мы представляем вам уникальную коллекцию премиальных тракторов и высококачественных комплектующих, созданных с использованием передовых технологий и высоких стандартов качества. Наша компания нацелена на удовлетворение потребностей самых требовательных клиентов, которые ценят надежность, производительность и комфорт в своей работе.</h5>
                <button class="main-block__more-button">ПОДРОБНЕЕ</button>
            </div>
            <div class="main-block__image-container">
                <div class="main-block__container-background">
                    <svg class="main-block__background-elem" width="734" height="901" viewBox="0 0 734 901" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M322.082 -5.23794L734 -4.99971L424.95 900.247L0.170897 900.001L322.082 -5.23794Z" fill="url(#paint0_linear_54_154)" />
                        <defs>
                        <linearGradient id="paint0_linear_54_154" x1="547.911" y1="-69.3684" x2="189.902" y2="965.629" gradientUnits="userSpaceOnUse">
                            <stop stop-color="#2CC179" />
                            <stop offset="1" stop-color="#155B39"/>
                        </linearGradient>
                        </defs>
                    </svg>
                </div>
                <img src="../images/picture-main-block.png" alt="EliteTractors" class="main-block__picture">
            </div>
        </div>
    </main>

Вот код Css:

.main-block {
    display: grid;
    justify-content: center;
    background-image: url(../images/main-block-background-image.png);
    width: 100%;
    height: 47vw;
    background-repeat: no-repeat;
}

.main-block__container {
    display: flex;
    justify-content: center;
    margin-top: 10.46vw;
}

.main-block__text-container {
    width: 50vw;
}

h1 {
    font-family: Roboto;
    font-weight: 700;
    font-size: 2.6vw;
    color: #fff;
    margin: 0px;
    margin-top: 5.2vw;
}

.main-block__description {
    font-family: Bahns;
    font-weight: 350;
    font-size: 1.31vw;
    color: #fff;
    line-height: 153%;
}

.main-block__more-button {
    font-family: Bahns;
    font-size: 1.31vw;
    height: 3.1vw;
    width: 12.1vw;
    padding: 0px;
    border: 0px;
    border-radius: 0.52vw;
    background-color: $mainBtnG;
    color: #fff;
}

.main-block__image-container {
    width: 43vw;
    position: relative;
}

.main-block__container-background {
    position: relative;
}
.main-block__background-elem {
    position: absolute;
    top: 0; 
    width: 100%;
    height: 100%; 
}

Вот как сейчас выглядит:

Вот как должно выглядеть: (Только сейчас он исчез)

Comments

[Николай]

Здравствуйте, покажите, пожалуйста, желаемый результат и как у Вас вышло?!

[NikitaSemenov21]

serega danet Это я так скачал с фигмы, с меню всё ок

Answer 1

[Artikul2]

Когда вы задаете элементу свойство 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 для этих элементов таким образом, чтобы они располагались корректно в стеке слоев.