如何将相对 div 置于绝对 div 之下？

Question

我有一个背景图片，上面有一个带有文字和图片的轮播，都是 1024x287 像素。 我想在该图像下方添加更多信息，并在下方放置页脚。

我可以在顶部只用一个 px 边距来解决这个问题，但是一旦你调整浏览器的大小，它看起来很糟糕。

我有以下标记：

.img-background {
  @media (max-width: 1035px) {
    display: none;
  }
  position:absolute;
  margin-left:50%;
  left:-512px;
  top:0px;
  width: 100%;
}

.infoblock {
  z-index: 2;
}

.carousel-control.right {
  left: auto;
  right: -50px;
}

.carousel-control.left {
  left: -100px;
  right: auto;
}

.carousel {
  position: absolute;
  margin-left: 50%;
  left: -512px;
  top: 60px;
  z-index: 2;
}

wrapper {
  position: relative;
  top: 60px;
  width: 100%;
  height: auto;
}

.carousel .item {
  width: 100%;
  /*slider width*/
  height: auto;
  /*slider height*/
  z-index: 2;
}

.carousel .item img {
  @media (max-width: 1035px) {
    display: none;
  }
  margin-left: 0%;
  width: 100%;
  /*img width*/
}

/*full width container*/

@media (max-width: 767px) {
  .block {
    margin-left: -20px;
    margin-right: -20px;
  }
}

@import 'bootstrap-responsive';
.navbar-inner {
  @include box-shadow(none !important);
  border: 0;
}

.navbar .nav>li>a {
  padding: 25px 10px 5px
}

.footer {
  color: $grayLight;
  a {
    color: $gray;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="block wrapper">

  <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">

      <img class="img-background" src="assets/banner.png" alt="">
      <div class="active item">
        <img src="assets/banner_1.png" alt="">
      </div>
      <div class="item">
        <img src="assets/banner_2.png" alt="">
      </div>
      <div class="item">
        <img src="assets/banner_3.png" alt="">
      </div>
      <div class="item">
        <img src="assets/banner_4.png" alt="">
      </div>
      <div class="item">
        <img src="assets/banner_5.png" alt="">
      </div>
      <div class="item">
        <img src="assets/banner_6.png" alt="">
      </div>
    </div>
    <br>
    <div>
      <img class="img" src="assets/android.png" alt="">
    </div>
    <div>
      <img class="img" src="assets/iphone.png" alt="">
    </div>
    <img class="img" src="assets/landline.png" alt="">
    <div>
      <img class="img" src="assets/blackberry.png" alt="">
    </div>
    <div>
      <img class="img" src="assets/windows.png" alt="">
    </div>

  </div>

</section>
<script type='text/javascript'>
  $(document).ready(function() {
    $('.carousel').carousel({
      interval: 5000
    })

  });
</script>

这是不应该的样子：

将 Android、iPhone 等徽标放在轮播中的问题在于，当您缩小浏览器时，它们一直在左侧，因此不可见。

如何在轮播下方放置一个 div，当屏幕很小时，轮播不显示，所以它应该只是在页面顶部。

Answer 1

至少据我所知，您不能将两个相对定位的 DIV 放在一起。

您可以做的是在相对定位的 DIV 内使用图像的绝对定位。 看看这个jsFiddle，我之前做的。

红色 DIV 是半透明的，在蓝色 DIV 之上，使用 position: absolute;、top: 0;、left: 0;，这两个被放置在一个容器内 <div class="container"> 和 position: relative; 和 margin: 0 auto;使容器居中。