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

Всех приветствую, можете пожалуйста объяснить почему у меня при написании в стилях "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%; 
}

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

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