jquery 滑块上按钮的 z-index

Question

我有一个全屏jquery滑块，我需要在上面放两个按钮（增加和减少滑块的速度）。我尝试在 css 文件中使用 z-index，但它不起作用。

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

这是 html 代码

<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>

我该怎么做？

谢谢。

Answer 1

代码的编写方式，z-index 属性实际上并没有做任何事情。由于 ui button 是 lyr1 的子代，因此它们不共享相同的堆栈上下文。

您需要移动 ui button 成为 lyr1 的兄弟姐妹，然后您应该会看到一些结果。

像这样：

<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>

Answer 2

当我测试你的原始代码时，按钮位于 lyr1 之上，没有额外的 css。影响图层堆栈的滑块中一定有其他东西。

<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>

jquery 滑块上按钮的 z-index

z-index for button over jquery slider

jquery

css

button

slider

z-index