jquery - 将对象叠加到 bootstrap Carousel 上

Question

我想知道如何在 Bootstrap 轮播的顶部叠加按钮或其他 div。到目前为止，我只有一个简单的按钮，它什么都不做，但它被困在旋转木马后面。我找到了将两者分开的其他修复程序，但我希望按钮位于旋转木马上方。任何帮助都会很棒! 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

你可以通过在按钮上添加位置来实现这一点

#Buttons{
position:absolute;
z-index:999;
}

您也可以添加 top 和 left 值来定位它