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

2 个答案: