JQuery insertion d'un calque au-dessus du contenu existant

Question

J'essaie d'afficher une nouvelle couche au-dessus du contenu existant sur mon site lorsqu'un clic sur un lien ou un bouton est effectué. J'utilise jquery - mais le code que j'ai ne semble pas fonctionner comme prévu.

Voici ce que j'ai:

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

});

L'effet que je suis après est d'avoir <div id="showme">...</div> apparaître directement après le #bodytag. <div id="showme">...</div> a un z-index plus élevé que toute autre chose sur le site, il devrait donc apparaître juste au-dessus du contenu directement après le #bodytag.

Merci pour l'aide.

Answer 1

Il me semble que pour obtenir l'effet désiré, la div dans laquelle vous insérez #showme doit être position: relative, et #showme devrait être position: absolute. Le positionnement absolu enlèvera l'élément du flux de documents, lui permettant de s'asseoir au-dessus du contenu.

En outre, deux conseils - ($) est un raccourci pour $ (document), et vous pouvez la chaîne jQuery commandes:

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

Answer 2

Assurez-vous que #showme a un position autre que static.