Question

我在jsFiddle上传我的代码，你可以在那里看到它。

当您点击该链接时，隐藏的常见问题解答部分将会显示，并且会推送其他div。但这不是我想要的，我需要所有其他div保持原状，我隐藏的常见问题部分只是漂浮在顶部。不知道怎么做。甚至不确定是否应该在HTML，CSS或jQuery中完成。

我的jQuery代码：

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

HTML code：

<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>

Answer 1

一个简单的解决方法就是将position:absolute添加到你的faqBox div。

<强> jsFiddle example

Position:absolute将元素从文档流中取出，在这种情况下，允许它出现在您的其他元素之上而不是将其向下推。

Answer 2

您可以在position:absolute div。

上使用#details

示例： http://jsfiddle.net/SrT2U/9/

你需要摆弄margin才能让它排成一行。

编辑：注意您使用margin:0 auto;将常见问题解答框置于中心位置。您可能需要找到另一种方法来排队。

编辑2：

我注意到，如果您将FAQ div放在#faqbox表格中，然后将margin:0 auto;更改为margin-top: 20px; margin-left:-16px; div中的#details，则一切正常。

示例2： http://jsfiddle.net/SrT2U/13/

注意：将div置于table之内是不符合规范的代码，但它确实可以重新定位常见问题解答。

Answer 3

如果你想让div显示在其他元素之上而不改变其他元素＆＃39;位置，你需要将其位置的CSS属性设置为绝对。

在您的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
}

您也可以使用jQuery执行此操作：

$(".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);
});

然后你的盒子将居中。

另外，你可能会找到你的按钮＆＃34;这是hte faq部分＆＃34;由div覆盖，但您可以通过添加关闭按钮或添加以下代码轻松启用关闭弹出框：

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

这使您可以单击页面的任何部分来关闭目标div #details，除了div本身。

通常，如果您尝试制作弹出框或对话框，可以尝试使用其他预先设计的插件，包括jQuery UI（http://jqueryui.com/dialog/）或blockUI（http://www.malsup.com/jquery/block/），其中前者仅支持对话框，后者支持各种弹出框。

如何使DIV显示在其他Div之上

3 个答案: