html - 即使 z-index 较高，旋转木马字幕仍保持在叠加之下

Question

我希望我的 Bootstrap 轮播在图像上方有一个点覆盖。 Carousel Caption 应位于虚线叠加层之上。我无法让它与 z-indexes 一起工作。

我做错了什么吗？ (可能安静 :-))

这是我目前所拥有的 JS Fiddle。

http://jsfiddle.net/r4x99ecf/50/

HTML:

<div class="banner">
<div class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://i.imgur.com/8hAR6s4.jpg" />
            <div class="carousel-caption">This is a caption of image 1.</div>
        </div>
        <div class="item">
            <img src="http://i.imgur.com/BPSXgEp.jpg" />
            <div class="carousel-caption">This is a caption of image 2.</div>
        </div>
    </div>
    <div class="overlay"></div>
</div>

CSS:

.carousel, .carousel-inner {
height: 350px;
}

.overlay {
background: transparent url("http://i.imgur.com/8B7UFiv.png") repeat;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 100px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  font-size:22px;
 }

Answer 1

添加<div class="overlay"></div>在 .item 的每个部分

HTML

<div class="banner">
    <div class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://i.imgur.com/8hAR6s4.jpg" />
                <div class="carousel-caption">This is a caption of image 1.</div>
                <div class="overlay"></div>
            </div>
            <div class="item">
                <img src="http://i.imgur.com/BPSXgEp.jpg" />
                <div class="carousel-caption">This is a caption of image 2.</div>
                 <div class="overlay"></div>
            </div>
            <div class="item">
                <img src="http://i.imgur.com/Vk1Y6v0.jpg" />
                <div class="carousel-caption">This is a caption of image 3.</div>
                 <div class="overlay"></div>
            </div>
        </div>

    </div>
</div>

fiddle :http://jsfiddle.net/r4x99ecf/51/