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);
  });
});