在<div>另一个<div>之上创建一个

Question

我正试图在另一个div(旋转的白色平面(上创建一个div。当我创建一个新的div时，文本被放置在上一个平面的下层后面。这是当前的网站(我正在尝试在瓶子图像下获取文本(：点击此处

我的代码(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

您可以尝试为div提供z索引，也许z索引是z维度中某个事物的顺序，比如说，如果您希望第二个div在前面，您可以为其提供一个的z索引

代码如下：

z-index:1;