如何让DIV出现在其他DIV标签上

I upload my code on jsFiddle, you can see it there.

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

When you click on the link, the hidden FAQ section will show up, and it will push other divs down. But that is not what I want, I need all other divs stay where they are, and my hidden FAQ section just float on the top. Not sure how to do it. Not even sure if this should be done in HTML, CSS or jQuery.

当你点击这个链接时，隐藏的FAQ部分将会出现，它将会把其他的divs推下。但那不是我想要的，我需要所有其他的女歌手呆在他们所在的地方，我隐藏的FAQ部分只是浮在顶部。不知道该怎么做。甚至不确定这是否应该用HTML、CSS或jQuery来实现。

My jQuery code:

我的jQuery代码:

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

HTML code:

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>

3 个解决方案

#1

You could use position:absolute on the #details div.

您可以在#details div中使用position:absolute。

Example: http://jsfiddle.net/SrT2U/9/

例如:http://jsfiddle.net/SrT2U/9/

You would need to fiddle with the margin to get it to line up.

你需要修改边缘以使它对齐。

EDIT: Noticing that you are using margin:0 auto; to center the FAQ box. You may need to find another way in order to line up the box.

编辑:注意到您使用的是空白:0自动;将FAQ框居中。您可能需要找到另一种方法来排列这个方框。

EDIT 2:

编辑2:

I noticed if you placed the FAQ div inside the #faqbox table and then change margin:0 auto; to margin-top: 20px; margin-left:-16px; in the #details div and it all works well.

我注意到，如果您将FAQ div放在#faqbox表中，然后更改margin:0 auto;margin-top:20 px;margin-left:-16 px;在#details div中，它工作得很好。

Example 2: http://jsfiddle.net/SrT2U/13/

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

NB: placing the div inside the table like so is not code to spec, but it does work re centering the FAQs.

NB:像这样将div放在表中并不符合规范，但是它确实以faq为中心工作。

#2

An easy fix would be to just add position:absolute to your faqBox div.

一个简单的解决方法是添加位置:绝对到您的faqBox div。

jsFiddle example

jsFiddle例子

Position:absolute takes the element out of the flow of the document and in this case, allows it to appear on top of your other element and not push it down.

位置:absolute将元素从文档流中取出，在本例中，允许它出现在其他元素的顶部，而不是向下推。

#3

If you want a div to show up on top of other elements without changing others' positions, you need to set it CSS property of position to absolute.

如果您希望div显示在其他元素之上，而不更改其他元素的位置，则需要将其CSS position属性设置为absolute。

In your css files specify the following:

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

You can also do that using jQuery as following:

您还可以使用jQuery进行如下操作:

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

If you want to still locate your pop-up box at the center of your window, you can use jQuery to center it as following.

如果您还想在窗口中心找到弹出框，可以使用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);
});

Then your box will be centered.

那么你的方块就会居中。

Also, you will probably find your button "this is hte faq section" is covered by your div, but you can easily enable closing the pop-up box by adding a close button or add the following code:

此外，您可能会发现您的div包含您的按钮“这是hte faq部分”，但是您可以通过添加关闭按钮或添加以下代码轻松关闭弹出框:

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

This enables you to click on any part of the page to close the targeted div #details except for the div itself.

这使您可以单击页面的任何部分来关闭除div本身之外的目标div #细节。

Usually, if you are trying to make a pop-up box or dialog, you can try to use other pre-designed plugins, including jQuery UI (http://jqueryui.com/dialog/) or blockUI (http://www.malsup.com/jquery/block/), of which the former only supports dialogs but the latter supports all kinds of pop-up boxes.

通常，如果您试图创建一个弹出框或对话框，您可以尝试使用其他预先设计的插件，包括jQuery UI (http://jqueryui.com/dialog/)或blockUI (http://www.malsup.com/jquery/block/)，前者只支持对话框，而后者支持所有类型的弹出框。

#1