Jquery 如何让DIV在其他DIV之上出现

我将代码上传到JSFIDLE上，您可以在那里看到它

当你点击链接时，隐藏的FAQ部分会出现，它会将其他div向下推。但这不是我想要的，我需要所有其他的div都呆在原地，而我隐藏的FAQ部分只是浮在顶部。不知道怎么做。甚至不确定这是否应该在HTML、CSS或jQuery中完成

我的jQuery代码：

$(function(){
    $(".OpenTopMessage").click(function () {
        $("#details").slideToggle("slow");
    });
});

HTML代码：

<div style="border: 1px solid #000;">
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
    <span>link</span>
    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
</div>

<div id="faqBox">
   <table width="100%">
<tr><td><a href="#" id="openFAQ" class="OpenTopMessage">this is hte faq section</a></td>
</tr>
    </table>

    <div id="details" style="display:none">
    <br/><br/><br/><br/><br/><br/><br/><br/>
 the display style property is set to none to ensure that the element no longer affects the layout of the page
 <br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
</div>
<br/><br/>
<div style="background:#c00;">other stuff heren the height reaches 0 after a hiding animation, the display style property is set to </div>  

链接
|  
链接
|  
链接
|  
链接
|  
链接
|  












“显示样式”属性设置为“无”，以确保该元素不再影响页面的布局















其他内容在隐藏动画后高度达到0时，“显示样式”属性设置为

一个简单的解决方法是只需将

位置：绝对

添加到faqBox div

---

Position:absolute

将元素从文档流中取出，在这种情况下，允许它显示在其他元素的顶部，而不是向下推。

您可以在

#details

div上使用

Position:absolute

示例：

您需要摆弄

边距

，使其对齐

---

编辑：注意到您正在使用

margin:0 auto以居中显示常见问题解答框。您可能需要找到另一种方法来排列箱子


编辑2:

我注意到，如果您将FAQ div放入
#FAQ box
表中，然后更改
边距：0自动至
页边距顶部：20px；左边距：-16px#details
div中的code>，一切正常

示例2:

注意：像这样将
div
放在
表中并不符合规范，但它确实可以将常见问题重新置于中心位置。
如果希望div显示在其他元素的顶部而不更改其他元素的位置，则需要将其CSS属性position设置为absolute

在css文件中指定以下内容：

#details{
    position: absolute;
    left: 100px;//your desired position as regard to the left of your window
    top: 100px;//your desired position as regard to the top of your window
}

$(".OpenTopMessage").click(function () {
    $("#details").slideToggle("slow");
    $("#details").css("position", "absolute");
    $("#details").css("left", "40px/*some value*/");
    $("#details").css("top", "40px/*some value*/");
});

您还可以使用jQuery执行以下操作：

#details{
    position: absolute;
    left: 100px;//your desired position as regard to the left of your window
    top: 100px;//your desired position as regard to the top of your window
}

$(".OpenTopMessage").click(function () {
    $("#details").slideToggle("slow");
    $("#details").css("position", "absolute");
    $("#details").css("left", "40px/*some value*/");
    $("#details").css("top", "40px/*some value*/");
});

如果仍然希望将弹出框定位在窗口的中心，可以使用jQuery将其居中，如下所示

$(".OpenTopMessage").click(function () {
    $("#details").slideToggle("slow");
    $("#details").css("position", "absolute");
    window_width = $(window).width(); //Get the user's window's width
    window_height = $(window).height(); //Get the user's window's height
    $("#details").css("left", (window_width-$("#details").width())/2);
    $("#details").css("top", (window_height-$("#details").height())/2);
});

然后你的盒子将居中

此外，您可能会发现div中包含了按钮“this is hte faq section”（这是常见问题解答部分），但您可以通过添加关闭按钮或添加以下代码轻松关闭弹出框：

$("body:not(#details)").click(function() {
    $("#details").slideToggle("slow");
});

这使您可以单击页面的任何部分以关闭目标div#详细信息，但div本身除外

通常，如果你想制作一个弹出框或对话框，你可以尝试使用其他预先设计的插件，包括jQuery UI（）或blockUI（），前者只支持对话框，而后者支持各种弹出框。
下次你还可以加密css以便于阅读吗？非常感谢，你的解决方案非常完美，不仅解决了我的问题，还注意了div定心。没问题@feelexit！很乐意帮忙。