Bootstrap Carousel Z-indexing

Question

I'm having some problems with my Bootstrap Carousel. I need a Carousel with 3 slides, 3 images, and each slide must have a search bar and a caption on the middle. The images displayed on Carousel need to have an dark overlay on top of them.

The problem is, search bar and the caption are displayed below the overlay div and z-indexing is not working. Z-indexing works on carousel controls. Strange?

Hope someone can help!

Here's the HTML

 <div data-ride="carousel" class="carousel slide" id="carousel-1">

    <div role="listbox" class="carousel-inner">
        <div class="item active">
            <img src="assets/img/slide-1.jpg" alt="Slide Image" class="w-100" />
        <div class="search-bar-container">
            <p class="carousel-text">DUMMY TEXT 1</p>
                <div class="dropdown"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button">SVE <span class="caret"></span></button>
        <ul role="menu" class="dropdown-menu">
            <li role="presentation"><a href="#">First Item</a></li>
            <li role="presentation"><a href="#">Second Item</a></li>
            <li role="presentation"><a href="#">Third Item</a></li>
        </ul>
    </div><input type="text" class="seach-bar-input" placeholder="PLACEHOLDER" /><button class="btn btn-default search-bar-seach-button" type="button"><i class="fa fa-search fa-lg"></i></button></div>
        </div>
        <div class="item"><img src="assets/img/slide-2.jpg" alt="Slide Image" class="w-100" />
        <div class="search-bar-container">
    <p class="carousel-text">DUMMY TEXT 2</p>
    <div class="dropdown"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button">SVE <span class="caret"></span></button>
        <ul role="menu" class="dropdown-menu">
            <li role="presentation"><a href="#">First Item</a></li>
            <li role="presentation"><a href="#">Second Item</a></li>
            <li role="presentation"><a href="#">Third Item</a></li>
        </ul>
    </div><input type="text" class="seach-bar-input" placeholder="PLACEHOLDER" /><button class="btn btn-default search-bar-seach-button" type="button"><i class="fa fa-search fa-lg"></i></button></div>

        </div>
        <div class="item"><img src="assets/img/slide-3.jpg" alt="Slide Image" class="w-100" />
        <div class="search-bar-container">
    <p class="carousel-text">DUMMY TEXT 3</p>
    <div class="dropdown"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button">SVE <span class="caret"></span></button>
        <ul role="menu" class="dropdown-menu">
            <li role="presentation"><a href="#">First Item</a></li>
            <li role="presentation"><a href="#">Second Item</a></li>
            <li role="presentation"><a href="#">Third Item</a></li>
        </ul>
    </div><input type="text" class="seach-bar-input" placeholder="PLACEHOLDER" /><button class="btn btn-default search-bar-seach-button" type="button"><i class="fa fa-search fa-lg"></i></button></div>

        </div>
    </div>
    <div><a href="#carousel-1" role="button" data-slide="prev" class="left carousel-control"><i class="glyphicon glyphicon-chevron-left"></i><span class="sr-only">Previous</span></a><a href="#carousel-1" role="button" data-slide="next" class="right carousel-control"><i class="glyphicon glyphicon-chevron-right"></i><span class="sr-only">Next</span></a></div>
    <ol
        class="carousel-indicators">
        <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-1" data-slide-to="1"></li>
        <li data-target="#carousel-1" data-slide-to="2"></li>
        </ol>
</div>
    <div class="carousel-overlay"></div>

And here's the CSS:

.carousel {
  height:600px;
  width:100%;
  background-size:cover;
  position:relative;
}

@media (max-width: 767px) {
  .carousel {
    height:350px;
    width:100%;
    position:relative;
  }
}

.carousel-inner {
  height:600px;
  width:100%;
}

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
  display:block;
  height:auto;
  max-width:100%;
  line-height:1;
  width:100%;
}

@media (max-width: 767px) {
  .carousel-inner {
    height:350px;
    width:100%;
  }
}

.carousel-text {
  color:#ffffff;
  font-size:24px;
  margin-left:10%;
  margin-right:10%;
  font-weight:500;
  margin-bottom:50px;
}

@media (max-width: 767px) {
  .carousel-text {
    color:#ffffff;
    font-size:17px;
    margin-left:5%;
    margin-right:5%;
    font-weight:500;
    margin-bottom:25px;
  }
}

.carousel-overlay {
  height:600px;
  width:100%;
  top:75px;
  left:0;
  background-color:rgba(0,0,0,0.5);
  background-size:cover;
  position:absolute;
  z-index:10;
}

@media (max-width: 767px) {
  .carousel-overlay {
    height:350px;
    width:100%;
    top:70px;
    left:0;
    background-color:rgba(0,0,0,0.5);
    background-size:initial;
    position:absolute;
    z-index:100;
  }
}

.carousel-indicators {
  z-index:1000;
}

.carousel-indicators {
  display:none;
}

.carousel-control {
  z-index:1000;
}

@media (max-width: 767px) {
  .carousel-control {
    display:none;
  }
}

.search-bar-container {
  position:absolute;
  z-index:1000 !important;
  top:30%;
  left:10%;
  right:10%;
  text-align:center;
}

@media (max-width: 767px) {
  .search-bar-container {
    position:absolute;
    z-index:999999;
    top:25% !important;
    left:5% !important;
    right:5% !important;
    width:90% !important;
    text-align:center;
  }
}

@media (max-width: 991px) {
  .search-bar-container {
    position:absolute;
    z-index:999999;
    top:35%;
    left:10%;
    right:10%;
    width:80%;
    text-align:center;
  }
}

.search-bar-container .dropdown {
  display:inline-block;
  height:50px !important;
}

.seach-bar-input {
  height:51px;
  width:500px;
  border-left:none;
  border-right:none;
  border-color:#ddd;
  padding:12px;
}

@media (max-width: 767px) {
  .seach-bar-input {
    height:50px;
    width:60% !important;
    border-left:none;
    border-right:none;
    border-color:#ddd;
    padding:12px;
  }
}

@media (max-width: 991px) {
  .seach-bar-input {
    height:50px;
    width:65%;
    border-left:none;
    border-right:none;
    border-color:#ddd;
    padding:12px;
  }
}

Answer 1

Did you try !important or did you first set the Z-index: 0 for the slide and then Z-index: 1 and so on?

Answer 2

.bgslider{
    position: absolute;
    left: 0px;
    top: 65px;
    z-index: -1;
    height: 100vh;
    width: 100%;
}

<!--Corasul slider opening-->
<div id="carouselExampleSlidesOnly" class="carousel slide bgslider" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active " data-interval="2000">
        <img src="../static/img/hero1.jpg" class="d-block w-100" alt="...">
    </div>

    <div class="carousel-item" data-interval="2000">
      <img src="../static/img/hero2.jpg" class="d-block w-100" alt="...">
     </div>

    <div class="carousel-item" data-interval="2000">
      <img src="../static/img/hero3.jpg" class="d-block w-100" alt="...">
      </div>

  </div>
</div>
<!--Corasul slider closing-->

Answer 3

I had a similar issue, using

.carousel-caption {
 position:top;
 top:-30px;
 }

the top content of the container was cutting off (looked to me like a z-index issue) so I tried to set the parent div z-index in chronological order to the point that carousel-caption has the highest value so it will be shown but still no luck.

My solution: Because .carousel-caption class position is set to to absolute I modified/removed all .carousel-caption position related CSS values:

.carousel-caption {
 position: relative!important;
 right:0!important;
 left:0!important;
 bottom:0!important;
 padding: 0px 0px!important;
 margin-top:-40px;
 }

I think that changing it in your code will let you accomplish the overlay effect etc...