javascript - 以正确的方式使用 z-index

Question

我想创建一个简单的滑块，就像我在图片中显示的那样。我有两个 div 包装器 1 和 wrapper2 以 20px 的边距分隔，我在包装器 1 中有一个按钮，单击它应该向下滑动一个新的 div它应该在包装器 1 和 2 的前面，

我使用的代码是

<div id="wrapper1" style="width:960px; height:200px;z-index:100;">
<a href="#" class="clickMe">
   <div id="tab1">
   </div>
</a>
<div id="slider" style="width:400px; height:100px; z-index:999;">
</div>
</div>
<div id="wrapper2" style="width:960px; height:200px; z-index:100;">
</div>

脚本看起来像

 $(document).ready(function()
 {
 $("#slider").css({"display":"none"});
 $(".clickMe").click(function()
 {
 $("#slider").slideDown("slow");
 }
 );
 });

使用此代码，我得到的是滑块窗口通过向下推动 wrapper2 而不是向前滑动而向下滑动。可能是什么问题？

Answer 1

您需要一个绝对位置才能使 z-index 起作用。

Answer 2

你必须把你slider的包装元素放在外面，否则父子关系会覆盖一些格式规则，比如 z-index。position:absolute和其他 css 属性应该由 jQuery 自动设置。

Answer 3

我认为你应该添加position:absolute;到“滑块”，并设置它的位置。

Answer 4

我已经把小提琴放在一起。

以下是相关代码：HTML

<div id="wrapper1">
  <div class="clickMeWrapper">
    <a class="clickMe" id="tab1" href="#">Click Me!</a>
    <div class="slider">
    </div>
  </div>
  <div class="clickMeWrapper">
    <a class="clickMe" id="tab1" href="#">Click Me!
    </a>
    <div class="slider">
    </div>
  </div>
</div>
<div id="wrapper2">
</div>​

jQuery

$(document).ready(function() {
    $(".slider").hide();
    $(".clickMeWrapper").click(function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        $(this).children(".slider").slideToggle("slow");
    });
});​

如果有不清楚的地方，请告诉我。