不能把任何div的圖像下滑塊

我無法將div的位置放在我的圖像滑塊下。它們都在滑塊上方，就好像滑塊不在容器內一樣。每當我嘗試在包裝下放置另一個div時，位置就完全關閉。是因爲我在包裝div中有滑塊嗎？不能把任何div的圖像下滑塊

<body> 

<div class="container" id="container-1"> 

    <!--Navigation Begin--> 
    <div class="navbar navbar-inverse navbar-fixed-top" id="custom-nav"> 
    <div class="container"> 

     <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
     <button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 

     <a class="navbar-brand" href="/"><img src="../Images/nav-logo.png" alt="Breakday Charters Logo"></a> 

     <div class="nav-collapse collapse navbar-responsive-collapse"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a href="#">Home</a> 
       </li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Booking</a></li> 
       <li><a href="#">Report</a></li> 
       <li><a href="#">Gallery</a></li> 
       <li><a href="#">Contact</a></li> 

      </ul> 

    <ul class="nav navbar-nav pull-right"> 
     <h3 id="number-head">Get Hooked</h3> 
     <p id="nav-number">(252)xxx-xxxx</p> 
     <li><img src="../Images/hook.png" alt="hook" id="nav-hook"/></li> 
    </ul> 
      </ul><!-- end nav pull-right --> 
     </div><!-- end nav-collapse --> 

    </div><!-- end container --> 
</div><!-- end navbar --> 

<!--================Carousel===============--> 

<div id="wrapper"> 
    <div id="carousel"> 
     <img src="../Images/Carousel/breakday-boat-lrg.png"alt="Breakday Charters Boat" width="990" height="450" class="img-responsive" /> 
     <img src="../Images/Carousel/turtle.png" alt="turtle" width="990" height="450" class="img-responsive"/> 
     <img src="../Images/Carousel/justin-and-fish.png" alt="Captain Justin" width="990" height="450" class="img-responsive" /> 
     <img src="../Images/Carousel/shark.png" alt="shark" width="990" height="450" class="img-responsive" /> 
    </div> 
    <a href="#" id="prev" title="Show previous"> </a> 
    <a href="#" id="next" title="Show next"> </a> 
    <div id="pager"></div> 
</div><!--wrapper div end--> 

</div><!--container-->

CSS：

html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

/*Navigation*/ 
#custom-nav { 
    min-height:85px; 
    background: #FFF; 
    border-bottom:#0e76bc medium solid; 
} 

.nav.navbar-nav li a { 
    color: #0E76BC; 
    margin-top:25px; 
    font-size:15px; 
} 

.nav.navbar-nav li a:hover { 
    color: #494238; 
} 

.nav.navbar-nav.pull-right li #nav-hook { 
    position: absolute; 
    z-index: 1031; 
    top: -40px; 
} 
.nav.navbar-nav.pull-right #nav-number { 
    font-size: 16px; 
    color: #333; 
    font-weight: bold; 
} 
.nav.navbar-nav.pull-right #number-head { 
    font-weight: bold; 
    color: #0e76bc; 
} 
.nav.navbar-nav.pull-right { 
    margin-top: 5px; 
} 

/* -------------------------------------- 
    Carousel 
    -------------------------------------- */ 

#wrapper { 
    background-color: #fff; 
    width: 100%; 
    height: 450px; 
    margin-top: -225px; 
    overflow: hidden; 
    position: absolute; 
    top: 40%; 
    left: 0; 
} 
#carousel img { 
    display: block; 
    float: left; 
    clear:right; 
} 
#prev, #next { 
    background-color: rgba(255, 255, 255, 0.7); 
    display: block; 
    height: 450px; 
    width: 50%; 
    top: 0; 
    position: absolute; 
} 
#prev:hover, #next:hover { 
    background-color: #fff; 
    background-color: rgba(255, 255, 255, 0.8); 
} 
#prev { 
    left: -495px; 
} 
#next { 
    right: -495px; 
} 
#pager { 
    margin-left: -470px; 
    position: absolute; 
    left: 50%; 
    bottom: 10px; 
} 
#pager a { 
    border: 2px solid #fff; 
    border-radius: 10px; 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
    margin: 0 5px 0 0; 
} 
#pager a:hover { 
    background-color: rgba(255, 255, 255, 0.5); 
} 
#pager a span { 
    display: none; 
} 
#pager a.selected { 
    background-color: #fff; 
}

來源

2014-05-21 user3542523

你能爲這個問題創造的jsfiddle？ –

你究竟想要什麼？ –

對於滑的旗幟，你可以試試這個

HTML

<div class="banner"> 
    <div class="bannerslider"> 
    <div class="slidertxt"> 
     <div class="slidernumber"> 
     <div id="nav"> 
      <ul> 
      <li><a class="active" href="#" onclick="goto('#1', this); return false">1</a></li> 
      <li><a href="#" onclick="goto('#2', this); return false">2</a></li> 
      <li><a href="#" onclick="goto('#3', this); return false">3</a></li> 
      <li><a href="#" onclick="goto('#4', this); return false">4</a></li> 
      <li><a href="#" onclick="goto('#5', this); return false">5</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div class="bannerimage"> 
    <div id="contentt"> 
     <div class="contentbox-wrapper"> 
     <div id="1" class="contentbox"> 
      <p> <a href="#"><img border="0" src="../Images/Carousel/breakday-boat-lrg.png" title="Haani"></a> </p> 
     </div> 
     <div id="2" class="contentbox"> 
      <p> <a href="#"><img border="0" src="../Images/Carousel/breakday-boat-lrg.png"></a> </p> 
     </div> 
     <div id="3" class="contentbox"> 
      <p> <a href="#"><img border="0" src="../Images/Carousel/breakday-boat-lrg.png"></a> </p> 
     </div> 
     <div id="4" class="contentbox"> 
      <p> <a href="#"><img border="0" src="../Images/Carousel/breakday-boat-lrg.png"></a> </p> 
     </div> 
     <div id="5" class="contentbox"> 
      <p> <a href="#"><img border="0" src="../Images/Carousel/breakday-boat-lrg.png"></a> </p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

CSS：

.banner { 
    width: 900px; 
    height: 357px; 
    margin:0; 
    float: left; 
} 
.bannerslider { 
    width: 500px; 
    position: absolute; 
    height: 351px; 
    float: left; 
    z-index: 80; 
    background-size: 350px 351px; 
    margin: 0 0 0 2px; 
} 
.slidertxt { 
    font-family: 'AUdimat-Regular'; 
    font-weight: normal; 
    text-shadow: 0 2px 1px #000000; 
    color: #fbfbfb; 
    font-size: 14px; 
    width: 500px; 
    margin: 60px 0 0 30px; 
    position: absolute; 
} 
#contentt { 
    overflow: hidden; 
} 
.contentbox-wrapper { 
    position: relative; 
    left: 0; 
    width: 5000px; 
    height: 100%; 
} 
.contentbox { 
    width: 975px; 
    height: 100%; 
    float: left; 
} 
.slidertxt p { 
    font-family: 'AUdimat-Bold'; 
    color: #fbfbfb; 
    font-size: 30px; 
    width: 960px; 
} 
.slidernumber { 
    height: 30px; 
    margin-top: -40px; 
    position: relative; 
    z-index: 10000; 
} 
#nav { 
    margin-top: 0; 
} 
#nav ul li { 
    display: inline; 
} 
.slidernumber a { 
    color: #fbfbfb; 
    text-decoration: none; 
    font-size: 13px; 
    font-family: 'AUdimat-Regular'; 
    padding: 0 5px 0 5px; 
    margin: 5px 5px 0 10px; 
    display: inline; 
    float: left; 
} 
#nav a.active { 
    background: #fbfbfb; 
    border: 1px solid #fbfbfb; 
    border-radius: 10px; 
    color: #8a0338; 
} 
.bannerimage { 
    width: 975px; 
    height: 350px; 
    z-index: 0; 
    margin: 1px 2px 0 5px; 
    float: right; 
}

個

JS：

function goto(id, t){ 
     $(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600); 
    $('#nav a').removeClass('active'); 
    $(t).addClass('active'); 
    }

你也可以嘗試slider banner

來源

2014-05-21 06:09:56

不能把任何div的圖像下滑塊

回答

相關問題