JQuery inserting a layer above existing content.

Question

Hi,

I'm trying to have a new layer appear above existing content on my site when a link/button is clicked. I am using jquery - but the code I have doesn't seem to work as expected.

Here is what I have:

 $(document).ready(function(){
  $("#button").click(function () {
  $("#showme").insertAfter("#bodytag")
  $("#showme").fadeIn(2000);
});

});

The effect I'm after is to have <div id="showme">...</div> appear directly after the #bodytag. <div id="showme">...</div> has a z-index higher than anything else on the site, so it should just appear above the content directly after the #bodytag.

Thanks for the assistance.

Answer 1

Make sure #showme has a position other than static.

Answer 2

It would appear to me that to get the desired effect, the div you are inserting #showme into needs to be position: relative, and #showme should be position: absolute. Absolute positioning will take the element out of the document flow, allowing it to sit above the content.

Also, two tips - $() is a shortcut for $(document), and you can chain jQuery commands:

$().ready(function(){
  $("#button").click(function () {
    $("#showme").insertAfter("#bodytag").fadeIn(2000);
  });
});