How do elements with absolute positioning move along with the rest of the page?

Question

When I am the absolute position of the object, it is stuck there. When you resize the browser window, it stays there while other objects glide around, thereby killing the entire point.

Now it is only for me. Obviously, it works on regular websites, such as yours. when the window is resized, everything moves and remains in its general template.

How can I achieve this with absolute positioning?

Answer 1

You need to set the absolutely positioned div inside relative to the position of the div. Anytime a div is relatively positioned, the absolute positioned div also moves with it.

<div class="relative" > <div class="absolute">absolute</div> </div> .relative{ position:relative; top:100px; left:100px; width:500px; height:500px; background:blue; } .absolute{ position:absolute; width:100px; height:100px; background:red; top:30px; left:50px; } 

Check out the working example http://jsfiddle.net/w2EMu/

Answer 2

The best solution would be to avoid absolute positioning. But if you use it and want to change your absolute object, you can register a method for resizing. For instance. jQuery.resize () and move it yourself. If you are not using jQuery, you should use document.addEventListener and the document. attachEvent .