jquery滑块上按钮的z-index答案

【问题标题】：z-index for button over jquery sliderjquery滑块上按钮的z-index
【发布时间】：2015-04-27 14:54:20
【问题描述】：

我有一个全屏 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>

我该怎么做？

谢谢。

【问题讨论】：

你设置position:relative了吗？两者都需要设置为此，否则 z-index 将不起作用。
@barry 我编辑了问题并添加了 css 代码。谢谢

标签： jquery css button slider z-index

【解决方案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>

【讨论】：

我明白你的意思，但我看不出你发布的代码的变化在哪里。然而，我将按钮 div 放在 lyr1 div 之外，现在它可以工作了，谢谢！
@user2425899 – 是的，头脑清醒。复制代码然后忘记编辑。现在改了。在我的辩护中，他们只是在工作时提供早餐。 :)
哈哈，这似乎很合理:) 现在我进一步检查了溢出问题。它被设置为隐藏，但现在它不再工作了。有什么想法吗？@barry
@user2425899 – 并非没有更多信息。可能想问一个新问题。

【解决方案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>

【讨论】：

感谢您的帮助 :) 错误出在嵌套中，现在我更改了它，它运行良好。
我想马上说，但是当我测试你的原始代码时，它在嵌套时工作。滑块中肯定有其他影响它的东西。
奇怪，因为当我调整嵌套时，它按我想要的方式工作