How to make absolute positioned elements move with the rest of the page?

Question

When I absolute position an object, it is stuck there. When you resize the browser window, it stays there while the other objects slide around, thus killing the whole point.

Now this is only for me. Obviously it works on normal websites, such as the one your on right now. when you resize the window everything moves around and stays in its overall template.

How can I achieve this with absolute positioning?

Answer 1

You need to put the absolutely positioned div inside a relatively position div. Anytime the relatively positioned div moves, the absolute positioned div will also move 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 working example at http://jsfiddle.net/w2EMu/

Answer 2

The best solution would be to avoid absolute positioning. But if you use it and want to reposition your absolute object you could register a resize method. E.g. jQuery.resize() and reposition it yourself. If you are not using jQuery you have to use document.addEventListener and document.attachEvent.