Question

Is it possible to position a div relative to another div which is not it’s parent? For example:

<div id="header"><!-- --></div>
<div id="content"><!-- --></div>
<div id="footer"><<!-- --></div>

In the above code, could #footer be relatively positioned to #header?

UPDATE

I ask because the semantic structure of the design I intend to implement doesn’t match the way I want to present it. Visually I’ll have a menu at the top of the page and a hidden div which will slide in above the menu on a click event. I therefore need to shuffle the order or divs such that a #menu is relatively positioned below a #header and will stay relatively positioned when the #header slides in on a jQuery slideToggle() event.

<div id="menu"><!-- --></div>
<div id="header"><!-- --></div>
<div id="content"><!-- --></div>
<div id="footer"><<!-- --></div>

#header should be fixed to the top of the window. #menu should be positioned relative to #header such that when #header slides in, #menu slides down by the same distance.

Answer 1

How do I move an HTML element in jQuery?

This question provided the answer I required. Basically you can use jQuery to move the element in the DOM on page load; note it’s important to allow the page to load first before attempting to manipulate the DOM.