ブートストラップにオブジェクトをオーバーレイするカルーセル

Question

ブートストラップカルーセルの上にボタンや他のdivをオーバーレイする方法を知りたいと思います。これまでのところ、私はただ何もしない単純なボタンを持っていますが、それはカルーセルの後ろに閉じ込められています。私は2つを分けた他の修正を見つけましたが、私はボタンをカルーセルの上に配置します。どんな助けでも素晴らしいでしょう！ HTML：

<!--Buttons--> 
<div id="Buttons" style="z-index: 2;"> 
    <button type="button" class="btn btn-default">Buyer</button> 
</div> 
<!--Carousel--> 
<div id="Carousel" class="c-wrapper" style="z-index: 1;"> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 

    <ol class="carousel-indicators overlay"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
    </ol> 

    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img src="Images/Loft1.jpg" alt="Chania"> 
     </div> 

     <div class="item"> 
      <img src="Images/Loft2.jpg" alt="Chania"> 
     </div> 

     <div class="item"> 
      <img src="Images/Loft3.jpg" alt="Flower"> 
     </div> 

     <div class="item"> 
      <img src="Images/Loft4.jpg" alt="Flower"> 
     </div> 
    </div> 
</div> 
</div> 

はCSS：

 html,body{overflow:hidden;} 
    html,body{height:100%;} 
    .carousel,.item,.active{height:100%;} 
    .carousel-inner{height:100%;} 

    div.c-wrapper{ 
     width: 100%; 
     margin: auto; 
    } 

    .carousel-inner > .item > img, 
    .carousel-inner > .item > a > img{ 
     width: 100%; 
     margin: auto; 
    } 

Answer 1

あなたはこの