Как я могу разместить div поверх заголовка с помощью flexbox?

body {
  padding: 0;
}

* {
  padding: 0;
  box-sizing: border-box;
}

.background-rectangule {
  width: 100%;
  height: 350px;
  background-color: rgba(234, 203, 193, 0.4);
  position: absolute;
}

.test {padding: 15px}

/* ------- nav --------- */

.nav-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  justify-content: flex-end;
}

nav {
  background: white;
  height: 100px;
  flex-direction: row;
  justify-content: space-between;
}

nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  padding: 5px;
}

nav li {
  position: relative;
  margin-left: 45px;
  font-family: "Inter", sans-serif;
}

li {
  display: list-item;
}

nav a {
  color: #8e7199;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}


/* ------- Containers --------- */

.containers {
  width: 200px;
  margin: 10px;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.welcome-section {
  width: 400px;
}

.welcome-section h1 {
  font-family: "Playfair Display", serif;
}

.intro-text {
  font-family: "Amiri", serif;
}

<header>
  <nav>
    <div class="background-rectangule"></div>
    <div class="test">your text here</div>
    <div class="nav-container">
      <ul>
        <li><a class="transition" href="link">home</a></li>
        <li><a class="transition" href="./about.html">about</a></li>
        <li><a class="transition" href="link">work</a></li>
        <li><a class="transition" href="./contact.html">contact</a></li>
        <li><a class="transition" href="./shop.html">shop</a></li>
      </ul>
    </div>
  </nav>
</header>
<main>
  <div class="wrapper">
    <div class="containers section-1">
      <img src="IMG_0034.JPG" max-width="700" height="380" />
    </div>
    <div class="containers welcome-section">
      <h1>Hey there</h1>
      <div class="intro-text">
        I’m Ana and I will help you with any design solution you might be looking for. I'll build the identity or your new, creative and exciting projects and restore new ones that may already exists
      </div>
    </div>
  </div>
</main>