Bootstrap Carousel Controls Not Click Able On setting z-index to -1

Question

Can you please take a look at this demo and let me know how I can enable ht e controls o the Bootstrap Carousel when I have to set z-index like -1?

#test{z-index:-1;}
.box1{height:500px; background-color:red;}
.box2{height:500px; background-color:blue;}

<section class="navbar-fixed-top" id="test">
<div class="row">
  <div class="container">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>

  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="http://cdn.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-2-full.jpg" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

  </div>
  </div>
  </section>
<section>
<div class="row">
  <div class="container">
  <div class="box1"></div>
  </div>
  </div>
  </section>
<section>
<div class="row">
  <div class="container">
  <div class="box2"></div>
  </div>
  </div>
  </section>

score 0 · Answer 1 · answered Apr 07 '15 at 22:24

0

The section#test is set to position: fixed which means not only that it stays at the same position, but also that it doesn't take up any space. That is why the next section is at the same position as section#test. Now, since you set section#test to z-index: -1, the other section is in front of section#test. Therefore you can't click the controls.

The solution is to remove position: fixed from section#test. In your case, the best thing to do is to simply remove the class navbar-fixed-top from section#test. Additionally, you should disable your script, so the sections are next to each other.

http://www.bootply.com/rAx64sK7wd

answered Apr 07 '15 at 22:24

Simon Mathewson

713
6
20

Thanks Simon but as I said I need to keep the section test fixed. – Suffii Apr 07 '15 at 22:44
You didn't say that in your post, but I can help you out. Why do you need it fixed? What is your goal? – Simon Mathewson Apr 07 '15 at 22:48
What I want to get is something like this BUT with a bootstrap slider as I have – Suffii Apr 07 '15 at 22:51
As you an see the slider and layout works fine BUT the slider controlls are not working! – Suffii Apr 07 '15 at 22:52
There was a similar question posted here: http://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning – Simon Mathewson Apr 07 '15 at 23:23

Bootstrap Carousel Controls Not Click Able On setting z-index to -1

1 Answers1