jquery - 如何使 Bootstrap 标题出现在固定轮播覆盖之上

Question

我正在制作一个 Bootstrap 网站，我需要在左侧固定覆盖层，轮播字幕必须在其上滑动。

目前，字幕位于覆盖部分下方。如何修复它。

<div class="container-fluid">
<div class="row fullscreen-carousel">
<div id="main-carousel" class="carousel slide">
  <div class="banner-seperator">
  </div>
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    <!-- First slide -->
    <div class="item active">
      <img src="http://placehold.it/1920x920" alt="">
      <div class="carousel-caption">
        <h1 data-animation="animated fadeInDown">
          This is the caption for slide 1
        </h1>
        <p data-animation="animated fadeInUp">
          This is the caption for slide 1
        </p>
        <button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">Button</button>
      </div>
    </div><!-- /.item -->

    <!-- Second slide -->
    <div class="item">
      <img src="http://placehold.it/1920x920" alt="">
      <div class="carousel-caption">
        <h1 data-animation="animated fadeInDown">
          This is the caption for slide 1
        </h1>
        <p data-animation="animated fadeInUp">
          This is the caption for slide 1
        </p>
        <button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">Button</button>
      </div>
    </div><!-- /.item -->

    <!-- Third slide -->
    <div class="item">
      <img src="http://placehold.it/1920x920" alt="">
      <div class="carousel-caption">
        <h1 data-animation="animated fadeInDown">
          This is the caption for slide 1
        </h1>
        <p data-animation="animated fadeInUp">
          This is the caption for slide 1
        </p>
        <button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">Button</button>
      </div>
    </div><!-- /.item -->

  </div><!-- /.carousel-inner -->

  <!-- Controls -->
  <a class="left carousel-control" href="#main-carousel"
  role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#main-carousel"
  role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
  </a>

</div><!-- /.carousel -->

SCSS

.carousel .carousel-caption {
bottom: auto;
text-align: left;
top: 30%;
transform: translateY(-30%);
z-index: 12;
h1 {
  font-size: 6em;
  margin-bottom: 0;
  animation-delay: 0.5s;
}
p {
  font-size: 1.5em;
  animation-delay: 1s;
}
button {
  float: left;
  animation-delay: 1s;
}
}

.item {
   -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.banner-seperator {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 27%;
  background-color: $main-banner-bg-color;
  z-index: 1;
}

此处为实例:http://www.bootply.com/f447QYfkHc

我尝试在每个 .item 之前放置叠加层，它也使叠加层与 slider 一起滑动。我需要将叠加层固定在左侧。

Answer 1

好的，问题是您尝试将标题放在横幅下方的元素中。我不认为有可能用 css 解决这个问题。

我看到的唯一可能性是将标题放在 .item 元素之外。

为了证明我的理论，尝试添加 position: relative; z-指数:12；的.item。您会看到带有标题的元素到达顶部(但横幅随后被覆盖)。