Question

我正在尝试在另一个div（旋转的白色平面）上创建一个div（文本）。当我创建一个新的div时，文本将作为上一个平面放在后面和下面的一层上。这是当前的网站（我正在尝试在瓶子图像下获取文字）： Click here

我的代码（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-index，也许z-index是z维度中某事物的顺序。可以说，如果您想将第二个div放在前面，则可以将其赋予z-index

代码如下：

z-index:1;

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

1 个答案: