title: Bootstrap Carousel Z-indexing
body: <p>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.</p>
  
  <p>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?</p>
  
  <p>Hope someone can help!</p>
  
  <p>Here's the HTML</p>
  
  <pre><code> &lt;div data-ride="carousel" class="carousel slide" id="carousel-1"&gt;
  
      &lt;div role="listbox" class="carousel-inner"&gt;
          &lt;div class="item active"&gt;
              &lt;img src="assets/img/slide-1.jpg" alt="Slide Image" class="w-100" /&gt;
          &lt;div class="search-bar-container"&gt;
              &lt;p class="carousel-text"&gt;DUMMY TEXT 1&lt;/p&gt;
                  &lt;div class="dropdown"&gt;&lt;button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button"&gt;SVE &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;ul role="menu" class="dropdown-menu"&gt;
              &lt;li role="presentation"&gt;&lt;a href="#"&gt;First Item&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="#"&gt;Second Item&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="#"&gt;Third Item&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;&lt;input type="text" class="seach-bar-input" placeholder="PLACEHOLDER" /&gt;&lt;button class="btn btn-default search-bar-seach-button" type="button"&gt;&lt;i class="fa fa-search fa-lg"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;&lt;img src="assets/img/slide-2.jpg" alt="Slide Image" class="w-100" /&gt;
          &lt;div class="search-bar-container"&gt;
      &lt;p class="carousel-text"&gt;DUMMY TEXT 2&lt;/p&gt;
      &lt;div class="dropdown"&gt;&lt;button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button"&gt;SVE &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;ul role="menu" class="dropdown-menu"&gt;
              &lt;li role="presentation"&gt;&lt;a href="#"&gt;First Item&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="#"&gt;Second Item&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="#"&gt;Third Item&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;&lt;input type="text" class="seach-bar-input" placeholder="PLACEHOLDER" /&gt;&lt;button class="btn btn-default search-bar-seach-button" type="button"&gt;&lt;i class="fa fa-search fa-lg"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="item"&gt;&lt;img src="assets/img/slide-3.jpg" alt="Slide Image" class="w-100" /&gt;
          &lt;div class="search-bar-container"&gt;
      &lt;p class="carousel-text"&gt;DUMMY TEXT 3&lt;/p&gt;
      &lt;div class="dropdown"&gt;&lt;button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" type="button"&gt;SVE &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
          &lt;ul role="menu" class="dropdown-menu"&gt;
              &lt;li role="presentation"&gt;&lt;a href="#"&gt;First Item&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="#"&gt;Second Item&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="#"&gt;Third Item&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;&lt;input type="text" class="seach-bar-input" placeholder="PLACEHOLDER" /&gt;&lt;button class="btn btn-default search-bar-seach-button" type="button"&gt;&lt;i class="fa fa-search fa-lg"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;&lt;a href="#carousel-1" role="button" data-slide="prev" class="left carousel-control"&gt;&lt;i class="glyphicon glyphicon-chevron-left"&gt;&lt;/i&gt;&lt;span class="sr-only"&gt;Previous&lt;/span&gt;&lt;/a&gt;&lt;a href="#carousel-1" role="button" data-slide="next" class="right carousel-control"&gt;&lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;&lt;span class="sr-only"&gt;Next&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;ol
          class="carousel-indicators"&gt;
          &lt;li data-target="#carousel-1" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#carousel-1" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#carousel-1" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;/ol&gt;
  &lt;/div&gt;
      &lt;div class="carousel-overlay"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And here's the CSS:</p>
  
  <pre><code>.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 &gt; .item &gt; img, .carousel-inner &gt; .item &gt; a &gt; 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;
    }
  }
  </code></pre>