z-index for button over jquery slider

问题

I have a full screen jquery slider and I need to put two buttons on it (to increase and decrease the speed of the slider). I tried with z-index in the css file but it's not working.

div#lyr1 {
     position:relative;
    z-index:1;
    }
.ui.button {
  ...
  position:relative;
  z-index:2;}

And here's the html code

<div id="wn">
   <div id="lyr1">
      <div id="inner1"> 
          <img src="images/1-2.png" width="2000"height="1100" alt="" />
          <img id="rpt1" src="images/1-2.png" width="2000" height="1100" alt="" />
      </div> 
     <div class="ui button">Follow</div>
   </div>
</div>

How can I do it ?

Thank you.

回答1:

The way the code is written, the z-index properties aren't really doing anything. Since ui button is a child of lyr1, they don't share the same stacking context.

You'll need to move ui button to be a sibling of lyr1, and then you should see some results.

Like so:

<div id="wn">
   <div id="lyr1">
      <div id="inner1"> 
          <img src="images/1-2.png" width="2000"height="1100" alt="" />
          <img id="rpt1" src="images/1-2.png" width="2000" height="1100" alt="" />
      </div> 
   </div>
   <div class="ui button">Follow</div>
</div>

回答2:

When I tested your original code, the button was on top of lyr1 without extra css. There must be something else in the slider that is effecting the layer stack.

<html>
<body>
<style>
div#lyr1 {
  background:#000;
}
.ui.button {
  background:#111;
  color:#ccc;
}
</style>
<div id="wn">
   <div id="lyr1">
      <div id="inner1"> 
          <img src="images/1-2.png" width="200"height="200" alt="" />
          <img id="rpt1" src="images/1-2.png" width="200" height="200" alt="" />
      </div> 
      <div class="ui button">Follow</div>
   </div>
</div>
</body>
</html>

来源：https://stackoverflow.com/questions/28721971/z-index-for-button-over-jquery-slider

标签

jquery

css

button

slider

z-index