How do I create a div in html which is absolutely positioned, which will push other elements to the side like in Apple's Pages?

Question

How do I create a div which will act like a relatively positioned div (as in it cannot allow elements behind it) and still will also act like an absolutely positioned div (as in it can freely be positioned)? I am willing to use javascript and jQuery if needed.

Example: or a similar effect

Answer 1

I don't think you can do what you're asking for in the way you're asking for it. You should be able to fake it adequately though.

Say you wanted to "insert" a sidebar that pushes all the main content on a page over by 200 pixels (the width of the sidebar). You could increase the left margin of the page/container by 200px (animate it if you wanna be flashy) and then absolutely position your div where you want it (you could animate it sliding in from off screen if you want it to appear as if it is "pushing" the other content over). If I understood the question correctly, then this should accomplish the visual effect you're going for.

Answer 2

I think you mean Draggable elements, you can use jQuery User Interface:

http://jqueryui.com/demos/draggable/