如何使DIV顯示在其他Div的頂部

Question

我上傳我的代碼在jsFiddle上，你可以在那裏看到它。

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

當你點擊鏈接時，隱藏的FAQ部分會顯示出來，它會推動其他的div了。但那不是我想要的，我需要所有其他divs保持它們的位置，而我隱藏的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> 

Answer 1

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

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

您需要與margin擺弄得到它去排隊。

---

編輯：注意到，您正在使用margin:0 auto;居中FAQ框。您可能需要找到另一種方法來排列方框。

---

編輯2：

如果放在常見問題DIV的#faqbox表內，然後在#details DIV改變margin:0 auto;到margin-top: 20px; margin-left:-16px;，這一切運作良好，我注意到。

實施例2：http://jsfiddle.net/SrT2U/13/

NB：將所述div的table內，像這樣不代碼規範，但它的工作重新定心常見問題。

Answer 2

一個簡單的辦法是隻添加position:absolute您faqBox股利。

jsFiddle example

Position:absolute需要的元素出該文檔的流動，在這種情況下，允許它出現在您的其他元素的頂部，而不是推下來。

Answer 3

如果您希望div在其他元素上方顯示而不更改其他元素的位置，則需要將其位置的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); 
}); 

然後你的盒子將居中。

此外，你可能會發現你的按鈕，「這是HTE常見問題解答部分」是由您的div覆蓋，但你可以很容易使加入了關閉按鈕關閉彈出框或添加以下代碼：

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

這使您可以單擊頁面的任何部分來關閉除div之外的目標div #details。

通常，如果您嘗試製作彈出框或對話框，您可以嘗試使用其他預先設計的插件，包括jQuery UI（http://jqueryui.com/dialog/）或blockUI（http://www.malsup.com/jquery/block/），其中前者僅支持對話框但後者支持各種彈出框。