CODEWITHSUNDEEP
javascriptjquerycsshtml
tatty27
tatty27

Reputation: 1554

SlideDown div showing behind other divs

I am using the JQuery slideDown method to show and hide a div which works well apart from the fact that it slides down behind other content on the page. I have tried changing the z-index of the div but it makes no difference, despite the fact that the divs it hides behind have no z-index rule and all of the other styling I've applied to it does work.

Adding the z-index to the image made that appear correctly.

My js..

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

The 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" />

The inline styling will be moved to CSS pages after I have got it working correctly

Upvotes: 0

Views: 553

Answers (1)

Lundeman
Lundeman

Reputation: 51

You have to change the position on the element. z-index does only work on Absolute and relative.

Try:

<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" />

Upvotes: 1

Related Questions