css z-index和bootstrap旋轉木馬

Question

我想要一箇中間的封面圖像和底部的旋轉木馬，在旋轉木馬上的標題（我想要改變項目背景）在z-index的頂部。

頂部提醒 - >底=>標題 - >封面圖像 - >項目（背景）

我該怎麼辦？

上引導框架的階級基礎

HTML

<div class="cover-image"></div> 
     <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
      <!-- Indicators --> 
      <ol class="carousel-indicators"> 
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
       <li data-target="#myCarousel" data-slide-to="1" class=""></li> 
       <li data-target="#myCarousel" data-slide-to="2" class=""></li> 
      </ol> 
      <div class="carousel-inner" role="listbox"> 
       <div class="item active bg bg1"> 
        <div class="container caption">...(p1)</div> 
       </div> 
       <div class="item bg bg2"> 
        <div class="container caption">...(p2)</div> 
       </div> 
       <div class="item bg bg3"> 
        <div class="container caption">...(p3)</div> 
       </div> 
      </div> 
     </div> 

Answer 1

嗯，你冷包裹所有這些在一個div然後使用position:relative;在div上，並將這個css用於標題。

.caption 
{ 
    position: absolute; 
    top: 0; 
}