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