javascript - SlideDown div 显示在其他 div 后面

Question

我正在使用 JQuery slideDown 方法来显示和隐藏一个 div，除了它在页面上的其他内容后面向下滑动之外，它工作得很好。我试过更改 div 的 z-index 但它没有任何区别，尽管它隐藏在后面的 divs 没有 z-index 规则和我应用到它的所有其他样式都有效。

将 z-index 添加到使图像正确显示的图像中。

我的 js..

<script>
$(document).ready(function(){
  $(".close1").click(function(){
    $("#what_is_audit_control").slideUp();
  });
  $(".slide_down_1").click(function(){
    $("#what_is_audit_control").slideDown();
  });
});

HTML...

<div id="what_is_audit_control" 
       style="display:none; border-style:solid;border-color:#666;border-width:thin;width:600px; margin-left:20px;">
           <p>I hope this works</p><br/>
           <p class="close1">close</p>
</div><!--what is audit control-->
<img id="audit_control_main_tab" class="slide_down_1" src="images/tabs/audit_control_main.gif" alt="What is audit control?" style="z-index:99999999999" />

在我让它正常工作后，内联样式将被移动到 CSS 页面

Answer 1

您必须更改元素上的位置。 z-index 仅适用于绝对和相对。

尝试:

<div id="what_is_audit_control" 
       style="display:none; border-style:solid;border-color:#666;border-width:thin;width:600px; margin-left:20px; position: relative; z-index: 2000">
           <p>I hope this works</p><br/>
           <p class="close1">close</p>
</div><!--what is audit control-->
<img id="audit_control_main_tab" class="slide_down_1" src="images/tabs/audit_control_main.gif" alt="What is audit control?" style=" position: relative; z-index:1000" />