Question

我有一张背景图片，上面有一个带有文字和图像的旋转木马，都是1024x287px。我想在该图像下面添加更多信息，下面我想放置页脚。

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

我有以下标记：

<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>

CSS：

.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;
    }


}

这不应该是这样的：

EZ-Call Home

将android，iphone等徽标放在轮播中的问题是，当你缩小浏览器的尺寸时，它们一直向左移动，所以看不见。

如何在旋转木马下面放置一个div，当屏幕很小时，旋转木马没有显示，所以它应该只在页面顶部。

Answer 1

至少据我所知，你不能把两个相对定位的DIV放在彼此之上。

你可以做的是在相对定位的DIV内使用图像的绝对定位。看一下我之前提到的这个jsFiddle。

红色DIV是半透明的，位于蓝色DIV之上，使用位置：绝对; ，顶部：0; ，左：0; ，将这两个放置在容器<div class="container">内，其中位置：相对; 和 margin：0 auto; - 将容器置于中心位置。< / p>

我认为这可以解决您的问题。

将相对div放在绝对值之下

1 个答案: