How to make a div on top of other divs

Question

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

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

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

My jQuery code:

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

You can use position:absolute in the #details div.

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

You will need to bother with margin so that it lines up.

---

EDIT: Noting that you are using margin:0 auto; to center the Frequently Asked Questions field. You may need to find another way to align the window.

---

EDIT 2:

I noticed that if you placed the FAQ section in the #faqbox table, then change the margin:0 auto; on margin-top: 20px; margin-left:-16px; margin-top: 20px; margin-left:-16px; in the #details div, and all this works well.

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

NB: placing a div inside a table thus not a code specification, but it works with centering frequently asked questions.

Answer 2

An easy solution would be to simply add position:absolute to the faqBox div.

JsFiddle example

position:absolute takes the element out of the document flow and in this case allows it to appear on top of your other element and not click on it.

Answer 3

If you want the div to appear on top of other elements without changing the position of the others, you need to set its CSS position property to absolute.

In your css files, specify the following:

 #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 this using jQuery as follows:

 $(".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 place the popup in the center of your window, you can use jQuery to center it, as shown below.

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

Then your block will be centered.

In addition, you will probably find that your “this hte faq section” button is covered by your div, but you can easily enable the popup to close by adding a close button or by adding the following code:

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

This allows you to click anywhere on the page to close the target #details divs except the div itself.

Usually, if you are trying to create a popup or dialog, you can try using 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-ups.