以正确的方式使用z-index

Question

我想创建一个简单的滑块，就像我在图片中显示的一样。我有两个divs包装器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

我认为您应该将position:absolute;添加到“滑块”，并设置其位置。

Answer 2

您必须将slider放在包装器元素之外，否则父子关系会覆盖某些格式规则，例如z-index。 position:absolute和其他css属性应该由jQuery自动设置。

Answer 3

我把fiddle放在一起。

以下是相关代码： 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");
    });
});​

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

Answer 4

z-index需要一个绝对位置才能工作。