JQuery在现有内容之上插入一个图层

Question

当点击链接/按钮时，我正在尝试在我的网站上的现有内容上方显示一个新图层。我正在使用jquery - 但我的代码似乎没有按预期工作。

这就是我所拥有的：

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

}）;

我所追求的效果是让<div id="showme">...</div>直接出现在＃bodytag之后。 <div id="showme">...</div>的z-index高于网站上的任何其他内容，因此它应该直接显示在＃bodytag之后的内容之上。

感谢您的帮助。

Answer 1

在我看来，为了获得理想的效果，你插入#showme的div需要是position：relative，而#showme应该是position：absolute。绝对定位将元素从文档流中移出，使其位于内容之上。

另外，两个提示 - $（）是$（document）的快捷方式，你可以链接jQuery命令：

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

Answer 2

确保#showme除position以外有static。