Question

我正在制作一个自助网站，我需要在左边有一个固定的叠加层，旋转木马标题必须在其上滑动。

目前，字幕保留在叠加部分下方。如何解决它。

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

此处的实例：array image

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

Answer 1

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

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

作为我理论的证明，尝试增加位置：相对; z-index：12; .item。您将看到带有标题的项目到达顶部（但是然后重叠了横幅）。

Answer 2

你忘记了标题的位置。

我可以看到3个css属性（top，bottom，z-index），它们仅适用于定位元素。

所以指定位置（ansolute或relative），它应该有效！

如何使自举标题出现在固定的轮播覆盖层之上

2 个答案: