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

html css positioning
roozbubu picture roozbubu · Oct 9, 2011 · Viewed 34k times · Source

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

Hussein picture Hussein · Oct 9, 2011

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/

Related questions

Position an element relative to its container

I'm trying to create a horizontal 100% stacked bar graph using HTML and CSS. I'd like to create the bars using DIVs with background colors and percentage widths depending on the values I want to graph. I also want to have …

Read More
How to make a HTML list appear horizontally instead of vertically using CSS only?

I need this because I want to make a menu (which is made from a HTML list) appear horizontally. I prefer not to use absolute positioning since it might become messy when I start changing the layout of the page. …

Read More
CSS position:fixed inside a positioned element

I have a positioned div whose content can be too long so scrollbars appear (overflow:auto set). It functions as a dialog box in an ajax app. I want to fix a close button on it's right top corner so …

Read More