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

Posted 2023-05-07

【中文标题】JQuery 在现有内容之上插入一个层

【英文标题】：JQuery inserting a layer above existing content

【发布时间】：2010-09-18 09:49:10

【问题描述】：

我正在尝试在单击链接/按钮时在我网站上现有内容的上方显示一个新图层。我正在使用 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 之后的内容上方。

感谢您的帮助。

【问题讨论】：

你是说它把已经在#bodytag下面的内容往下推？还是出现在已经存在的内容后面？

【参考方案1】：

在我看来，要获得所需的效果，您插入#showme 的 div 需要是位置：相对，而#showme 应该是位置：绝对。绝对定位会将元素从文档流中取出，使其位于内容之上。

另外，还有两个提示 - $() 是 $(document) 的快捷方式，您可以链接 jQuery 命令：

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

【讨论】：

感谢 tags2k。解决方案如您所描述。将 position:absolute 添加到我插入的内容中就可以了。另外-感谢您提供的快捷方式-我是 jquery 的新手，因此非常感谢。

【参考方案2】：

确保#showme 的position 不是static。