如何定位滑块图像

Question

我试图从此链接中放置滑块：

https://startbootstrap.com/template-overviews/full-slider/

我保留了header 650px; and carousel height: 100%。在尝试的同时我也有其他元素，这使得活动滑块低于这些元素。

请查看以下链接：http://www.jrnoordbgroups.com/

我的活动滑块元素正在关闭。我应该改变什么CSS？

Answer 1

解决这个问题的两种方法：

将滑块元素放在第一部分（它所属的位置）。需要进行一些调整......

<div class="container header-content">
        <div class="row">
               <!--here for example-->
               ...

或者将滑块位置设置为绝对值：

.carousel-inner {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
    overflow: hidden;
}

Answer 2

您的carousel-inner应该具有以下风格：

.carousel-inner {
    position: absolute;
    top: 0;
    width: 100%;
    overflow: hidden;
}

同样必须使用z-index来确保您的内容和标题位于carousel-inner之上或将其推送到header

中的第一个元素