Размещение элементов с абсолютном позиционированием друг под другом?

<div className="App">
  <NavBar/>
  <MainView/>
  <div className='stock'>
    <h2>Акции</h2>
  </div>
</div>

MainView он сам relative, но его дети absolute. у div.stock я позиционирование вообще не указывал, но при это он отображается в левом верхнем углу, как будто он absolute, хотя должен отображаться под MainView. Сделать MainView с обычным позиционированием нельзя, так как съедут некоторые элементы. Как решить проблему? Оставлю ссылку на ngrok

MainView.jsx

<div className='main'>
  <img class='img_main' src={main} alt='main'/>
  <div class='content'>
    <Logo class='logo'/>
    <div class='text'>
      <div>
        <h2 class='dostavka'>Доставка</h2>
        <div style={{'display': 'flex'}}>
          <h3 class='vkusheishei'>вкуснейшей</h3>
          <CSSTransition classNames='alert' in={showCursor} timeout={100} unmountOnExit>
            <p class='cursor'>|</p>
          </CSSTransition>
          </div>
        <h3 class='kavked'>кавказской еды с мангала</h3>
      </div>
      <ul>
        <li>
          Минимальная сумма заказа на<br/>доставку: 1000₽
        </li>
        <li>
          Стоимость доставки заказа от 250₽
        </li>
        <li>
          Заказы с выше 5000₽<br/>доставляются бесплатно
        </li>
        <li>
          Время работы: 10:00 - 00:00
        </li>
      </ul>
    </div>
  </div>
</div>

MainView.css

.img_main {
filter: brightness(0.6);
width: 100%;
position: absolute;
}

.main {
position: relative;
}

.content {
width: 100vw;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 120px;
}

.logo {
width: 300px;
}

.text {
width: 75vw;
display: flex;
justify-content: space-around;
align-items: center;
color: #fff;
}

.dostavka, .vkusheishei, .kavked, .cursor, .text ul li {
font-family: 'Montserrat', sans-serif;
}

.dostavka {
font-size: 62px;
}

.vkusheishei {
font-size: 36px;
font-style: italic;
color: #FAAF3F;
}

.cursor {
font-size: 36px;
font-style: italic;
color: #D94241;
}

.kavked {
font-size: 32px;
}

.text ul li {
padding-bottom: 6px;
font-size: 18px;
font-weight: 500;
}

.alert-enter {
opacity: 0;
}

.alert-enter-active {
opacity: 1;
transition: opacity 100ms;
}

.alert-exit {
opacity: 1;
}

.alert-exit-active {
opacity: 0;
transition: opacity 100ms;
}