CODEWITHSUNDEEP
htmlcsspositioning
roozbubu
roozbubu

Reputation: 1176

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

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?

Upvotes: 12

Views: 50969

Answers (2)

Hussein
Hussein

Reputation: 42818

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/

Upvotes: 31

styrr
styrr

Reputation: 829

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.

Upvotes: 1

Related Questions