title: css z-index and bootstrap carousel
body: <p>I want a cover-image on middle and the carousel on bottom, the captions that are in carousel (I want to change with item-background) on top in <code>z-index</code>.</p>
  
  <p>Remind top ->bottom => caption ->cover-image ->item(background)</p>
  
  <p>What should I do?</p>
  
  <p><strong>The class base on bootstrap framework</strong></p>
  
  <p>HTML </p>
  
  <pre><code>&lt;div class="cover-image"&gt;&lt;/div&gt;
          &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
              &lt;!-- Indicators --&gt;
              &lt;ol class="carousel-indicators"&gt;
                  &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                  &lt;li data-target="#myCarousel" data-slide-to="1" class=""&gt;&lt;/li&gt;
                  &lt;li data-target="#myCarousel" data-slide-to="2" class=""&gt;&lt;/li&gt;
              &lt;/ol&gt;
              &lt;div class="carousel-inner" role="listbox"&gt;
                  &lt;div class="item active bg bg1"&gt;
                      &lt;div class="container caption"&gt;...(p1)&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item  bg bg2"&gt;
                      &lt;div class="container caption"&gt;...(p2)&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item  bg bg3"&gt;
                      &lt;div class="container caption"&gt;...(p3)&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>