javascript - z-indexを正しい方法で使用する

Question

写真に示したような単純なスライダーを作成したいと思います。2つの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

position:absolute;「スライダー」に追加して、その位置を設定する必要があると思います。

Answer 2

ラッパー要素の外側に配置する必要があります。sliderそうしないと、親子関係がz-indexなどのいくつかのフォーマットルールをオーバーライドします。position:absoluteその他のcss属性は、jQueryによって自動的に設定される必要があります。

Answer 3

私はフィドルをまとめました。

関連するコードは次のとおりです。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が機能するには、絶対位置が必要です。