html - 如何在旋转木马下方 float 一个div？仅使用 html 和 css

Question

the layout I'm trying to make

谁能帮我把div放在轮播下面？我对此有点陌生

Answer 1

给轮播一个z-index: 5;和 position: relative;并给你想要的 div 在它下面 position: relative;和 top: -value其中 value 是您希望它上升的像素。

而不是 <div class="carousel">使用您自己的旋转木马 div。与标题相同。

For more info on how z-index works visit https://www.w3schools.com/cssref/pr_pos_z-index.asp

header {
  height: 80px;
  width: 100vw;
  background-color: yellow;
  position: relative;
}

nav {
  height: 40px;
  width: 100vw;
  background-color: pink;
  position: absolute;
  bottom: 0;
}

.carousel {
  width: 100vw;
  height: 100px;
  background-color: RGBA(0,255,0,0.4);
  z-index: 5;
  position: relative;
}

.classname {
  width: 80vw;
  height: 200px;
  background-color: lightblue;
  display: block;
  margin: 0 auto;
  position: relative;
  top: -40px;
}

header,
nav{
  text-align: center;
  line-height: 40px;
}

.carousel{
  text-align: center;
  line-height: 100px;
}

.classname{
 text-align: center;
  line-height: 200px;
}

<header>
  Header
  <nav>
    Nav
  </nav>
</header>
<div class="carousel">
  Carousel
</div>
<div class="classname"> DIV below carousel</div>