How to float a <div> echoed in the footer over a <div> located elsewhere (PHP/jQuery/HTML/CSS)

Question

Hello All!

I'm embarking on a major project, but am stuck on a tiny issue at the very start. I'll try to be as concise as possible.

I have a PHP script that will be echoing into the footer of the page (the last stuff before </body></html> a bunch of <div>s containing visible buttons and <div>s containing hidden dialog boxes.

The plan is to have the buttons float in the upper-right corner of corresponding <div>s in the main content area of the page. i.e. - button-1 echoed into the footer will float in the corner of content-box-1, and will be tied to the hidden <div> 'dialog-1'.

I'll be using jQuery and jQuery UI Dialog throughout the page(s). I'm not sure if that's particularly relevant to this question, but thought it worth mentioning just in case.

So my question, put simply, is how do I echo a <div class="button">Button 1</div> into the footer with PHP, but have it float in the upper-right corner (with maybe 5px margin) of <div class=content>Content 1 is full of content</div>?

A picture says a thousand words:

As shown above, I want the little blue gear button things in the corner of content pieces, locked and loaded with hidden <div>s containing dialog boxes. I've found plenty of info on how to float divs on top of divs, but all the examples I saw showed the <div>s in close proximity to each other in the page source; not with a hundred lines of source code between the two <div>s

I'm not sure if the solution is pure CSS, pure jQuery/jQueryUI or a combination of the two.

Any advice will be much appreciated.

Thanks!

Answer 1

You will want to set the position of the floating to to:

position:absolute;

Then set the left and top of the div to some location near the 'gear', you can get the position from the position method.

var node = $('#gear');
var position = node.position();
var dialog = $("#dialog");
dialog.css("left", position.left);
dialog.css("top", position.top);
dialog.fadeIn("fast");

Something similar to this might work.

Edit: This has some flaws, after a resize the dialog will be out of position, the reason you see the original div so close to the 'gear' is because they use position:relative on the gear and then position the dialog absolutely.

When an element is absolutely positioned from within an element that is already relatively or absolutely positioned it is now positioned relatively to it's parent element rather than the window element

Dialog is positioned 10px relative to the top left of the #gear div:

<div style="position:relative" id="gear">
  <div style="position:absolute;top:10px;left:10px" id="dialog"></div>
</div>

Dialog is positioned relative to the top left of the window:

<div id="gear">
  <div style="position:absolute;top:10px;left:10px" id="dialog"></div>
</div>

There is probably no reason not to move the dialog to a position within the gear before it is displayed, just append the dialog within the gear, $("#gear").append($("#dialog"))