jQuery 如何让 DIV 显示在其他 Div 之上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13435430/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make DIV show up on top of other Divs
提问by qinking126
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部分会出现，它会将其他div向下推。但这不是我想要的，我需要所有其他 div 保持原样，而我隐藏的常见问题解答部分只是浮动在顶部。不知道该怎么做。甚至不确定这是否应该在 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> | </span>
<span>link</span>
<span> | </span>
<span>link</span>
<span> | </span>
<span>link</span>
<span> | </span>
<span>link</span>
<span> | </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>
采纳答案by Jason Gennaro
You could use position:absoluteon the #detailsdiv.
您可以position:absolute在#detailsdiv上使用。
Example:http://jsfiddle.net/SrT2U/9/
示例：http : //jsfiddle.net/SrT2U/9/
You would need to fiddle with the marginto get it to line up.
您需要摆弄 以使其对齐margin。
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.
编辑：注意您正在使用margin:0 auto;将常见问题解答框居中。您可能需要找到另一种方式来排列盒子。
EDIT 2:
编辑2：
I noticed if you placed the FAQ div inside the #faqboxtable and then change margin:0 auto;to margin-top: 20px; margin-left:-16px;in the #detailsdiv and it all works well.
我注意到如果您将 FAQ div 放在#faqbox表格中，然后在div 中更改margin:0 auto;为margin-top: 20px; margin-left:-16px;，#details并且一切正常。
Example 2:http://jsfiddle.net/SrT2U/13/
示例 2：http : //jsfiddle.net/SrT2U/13/
NB: placing the divinside the tablelike so is not code to spec, but it does work re centering the FAQs.
注意：像这样放置div内部table不是规范代码，但它确实可以重新集中常见问题解答。
回答by j08691
An easy fix would be to just add position:absoluteto your faqBox div.
一个简单的解决方法是添加position:absolute到您的 faqBox div。
Position:absolutetakes 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.
Position:absolute将元素从文档流中取出，在这种情况下，允许它出现在其他元素的顶部，而不是将其向下推。
回答by ljhljh235
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 位置属性设置为绝对。
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 #details，除了 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/)，前者只支持对话框，后者支持各种弹窗。
