Create a <div> on top of another <div> - html

Question

I'm trying to create a div (text) on top of another div (rotated white plane). When I create a new div the text is being placed behind and on a lower layer as the previous plane. This is the current website (I'm trying to get text under the bottle image):
Click here
My code (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

you can try giving z-index to the div maybe z-index is the order of something in the z dimension lets say if you want the second div to be in front you can give it the z-index of one
the code looks like this:
z-index:1;