固定カルーセルオーバーレイの上にブートストラップキャプションを付ける方法

私はブートストラップのウェブサイトを作成していますが、カルーセルのキャプションがスライドしなければならない左側に固定オーバーレイが必要です。固定カルーセルオーバーレイの上にブートストラップキャプションを付ける方法

現在、キャプションはオーバーレイセクションの下にあります。それを修正する方法。

<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前に、私は、オーバーレイを配置してみました。私はオーバーレイを左に固定する必要があります。

出典

2016-12-07 Sathish Manohar