Question

我想知道如何在引导旋转木马的顶部覆盖按钮或其他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;
}

您也可以添加顶部和左侧值来定位此

将对象覆盖到bootstrap Carousels上

1 个答案: