Javascript 正确使用z索引

我想创建一个简单的滑块，就像我在图中显示的那样。。我有两个div wrapper 1和wrapper 2，以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>

---

有了这段代码，我得到的是滑动窗口通过向下推包装器2而不是向前滑动。可能是什么问题？

我认为您应该添加

位置：绝对

到“slider”，并设置其位置。

您必须将

滑块

放在包装器元素之外，否则父子关系将覆盖某些格式规则，如z-index

position:absolute

和其他css属性应该由jQuery自动设置。

我已经把它们放在一起了

以下是相关代码： HTML

---

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

你需要一个z-index工作的绝对位置。

NB：我上传的图片就是我希望我的网站的样子……对不起，我是说它被编辑了……我不是在谈论这个问题……嗯……这个。。。我还有一个疑问。。。我们使用“#”作为href链接，因此当我们单击按钮时，会将哈希符号gts附加到url。。那么我是否要防止frm hpning呢？我已经编辑了小提琴和代码（jQuery部分）。这应该行得通。如果答案正确，请将其标记为正确。还有一件事，是否可以定位滑块？？我试过左上，但没用。你需要什么。相对定位还是绝对定位？绝对定位已经开始工作了。我的意思是我希望打开滑块离按钮稍微低一点，

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

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

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