Создайте <div>поверх другого <div>

Question

Я пытаюсь создать div (текст) поверх другого div (повернутая белая плоскость). Когда я создаю новый div, текст размещается позади и на нижнем слое, как предыдущая плоскость. Это текущий веб-сайт (я пытаюсь получить текст под изображением bottle): Нажмите здесь

Мой код (CSS & HTML):

/* Navigation Bar */

.topnav a {
  float: left;
  color: lightgray;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  vertical-align: center;
}

.topnav a.logo {
  float: left;
  text-align: center;
  padding: 0px 0px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a.index:hover {
  background-color: #ddd;
  color: black;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #FC8E11;
  font-weight: bold;
  color: white;
}

.topnav {
  background-color: #333;
  overflow: hidden;
  font-family: arial;
}


/* Body settings */

body {
  margin: 0px;
  padding: 0px;
  background-color: #FFFF;
  height: 2000px;
  overflow-x: hidden;
}

.content {
  position: relative;
}

.plane {
  background-color: white;
  width: 120%;
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
  height: 370px;
  position: absolute;
  bottom: -140px;
  left: -10%;
}

.plane2 {
  background-color: #FC8E11;
  position: absolute;
  width: 100%;
  height: 870px;
  left: 0;
  top: 0px;
  z-index: -5;
}

.titletext {
  text-align: middle;
}

.product_image {
  margin-left: auto;
  margin-right: auto;
  width: 800px;
  padding-top: 40px;
}

.container {
  margin: 0;
  padding: 0;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 220px;
}

.tekst {
  width: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
}

<!--Navigation Bar-->
<div class="topnav">
  <a class="logo" href="index.html"><img src="/images/logo_groot.png" alt="logo" width="48" height="48" align="left"></a>
  <a class="index active" href="index.html">Over ons</a>
  <a class="index" href="verkooplocaties.html">Verkooplocaties</a>
  <a class="index" href="contact.html">Contact</a>
</div>

<div class="content">
  <!--Illustration-->
  <div class="product_image">
    <img src="/images/illustration.png" width="800px" height="800px">
  </div>

  <!--Planes-->
  <div class="plane2"></div>
  <div class="plane"></div>
</div>

<div class="container">
  <!--Text-->
  <div class="tekst">
    <p> Heb je tijdens het sporten sleutels of pin- & sportpassen bij je? Hinderen deze spullen je soms bij het sporten? BottleBuidel is een houder voor je drinkfles waar je deze spullen in kan bewaren tijdens het sporten. Door de flexibele stof past de BottleBuidel
      om iedere sportfles en kun je daardoor altijd je spullen bij je houden zonder dat je deze hoeft te bewaren in je broekzakken of op de grond. De BottleBuidel is gemaakt van geupcyclede (gewassen!) sportbroeken waardoor het bijdraagt aan een duurzamere
      wereld! Meer informatie over het product, verkooplocaties en de prijs is te vinden op de product pagina.</p>
  </div>
</div>

Answer 1

вы можете попробовать задать z-index для div. Возможно, z-index - порядок порядка в измерении z. Допустим, если вы хотите, чтобы второй div находился впереди, вы можете присвоить ему z-index, равный единице * 1001. *

код выглядит так:

z-index:1;