Текст прорезает изображения

Question

Попытка поместить текст перед изображением, однако изображение обрезается текстом. Я уже довольно давно безуспешно пытаюсь найти решение. Имейте в виду, что я полный новичок и занимаюсь этим всего неделю, пожалуйста, и спасибо.

Текст прорезается через изображение

@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

/* GLOBAL */

* {
  box-sizing: border-box;
  background-color: rgb(46, 46, 46);
}

body {
  margin: 0%;
  padding: 0%;
}

header {
  margin: 0%;
  padding: 0%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

li,
a,
button {
  font-family: "righteous";
  font-weight: 500;
  font-size: 16px;
  color: rgb(255, 255, 255);
}


/* NAVLINKS */

.Navlinks {
  list-style: none;
}

.Navlinks li {
  display: inline-block;
  padding: 0px 20px;
}

.Navlinks li a {
  transition: all 0.3s ease 0s;
}

.Navlinks li a:hover {
  transition: all 0.3s ease 0s;
  color: rgb(236, 130, 130);
}


/* BUTTONS */

button {
  padding: 9px 25px;
  background-color: rgb(236, 130, 130);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

button:hover {
  background-color: rgb(160, 236, 255);
}


/* TOP CONTAINER GRID */

.top-container {
  margin-top: 5%;
  max-height: 1fr;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
}

.top-container .showcase {
  border-style: solid;
  background-image: url("..//images/semi-opened-laptop-computer-turned-on-on-table-2047905.jpg");
  background-size: 1fr;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  min-height: 400px;
}


/* ASIDE (YOUTUBE VIDEO) */

aside {
  border-style: solid;
}

aside iframe {
  margin-left: 25%;
}


/* CONTAINER IMAGE */

.containerimg {
  height: 100%;
  object-fit: cover;
}

<!-- NAV AND HEADER -->

<header class="logo">
  <a href="Https://youtube.com" target=_blank><img src="./images/Gemini2k.png" alt="Logo"></a>
  <nav>
    <ul class="Navlinks">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Projects</a></li>
    </ul>
  </nav>
  <a class="Cbutton" href="#"><button class="Cbutton">Contact</button></a>
</header>

<!--NAV AND HEADER END  -->

<!-- TOP CONTAINER START -->

<section class="top-container">
  <div class="showcase">
    <h1>Lorem, ipsum.</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet dicta doloribus dolor est minima, maxime voluptates sed inventore quaerat, quo magni necessitatibus nesciunt sit similique praesentium temporibus. Odit, ratione vel.
    </p>
  </div>
  <aside class="top-box">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Vt_CADIEFKI?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </aside>
</section>

<!-- TOP CONTAINER END -->

<!-- MID CONTAINER START -->

<section class="mid-container">
  <div class="container">
    <div class="tile"><img src="http://via.placeholder.com/800x600/C72B41/800834]" alt=""></div>
    <div class="tile"><img src="http://via.placeholder.com/800x600/C72B41/800834]" alt=""></div>
    <div class="tile"><img src="http://via.placeholder.com/800x600/C72B41/800834]" alt=""></div>
    <div class="tile"><img src="http://via.placeholder.com/800x600/C72B41/800834]" alt=""></div>
    <div class="tile"><img src="http://via.placeholder.com/800x600/C72B41/800834]" alt=""></div>
  </div>
</section>

<footer>
  <h1>&copy copyright 2020 Gemini Enterprises</h1>
</footer>

Answer 1

На основании этой статьи Я придумал это решение

.showcase {
  position: relative;
  text-align: center;
  color: white;
}
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

      <div class="showcase">
       <iframe width="560" height="315" src="https://www.youtube.com/embed/Vt_CADIEFKI?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <div class="top-left">
        <h1>Lorem, ipsum.</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet dicta doloribus dolor est minima, maxime voluptates sed inventore quaerat, quo magni necessitatibus nesciunt sit similique praesentium temporibus. Odit, ratione vel.
        </p>
      </div>
</div>