CODEWITHSUNDEEP
css
user656925
user656925

Reputation:

positioning relative to an absolute positioned element - is it possible?

I have some space on the page that is absolutely positioned, I then have multiple absolutely positioned elements with in this space...works great...whenever I need to add another elment I don't have to worry about page flow...i just put it where I want it using the x-y plane.

Problem I'm havin...is that now I have some dynamic content in one of the absolute positioned elements...as it grows it has z - index below the bottom element so it just expands under the element below it.

I want the element below it to move down as the one above it expands.

I tried setting the positioning of the elemenet below to "relative" but this is only relative to the parent div...not its sibling div...hence it jumps to the top of the page. "static" positioning has the same effect it jumps to the top. It seems like absolutely positioned elements are essentially ignored by relaive and static positioned elements.

Is there as way I can have the sibling div move as its sibling grows?

Is there any way to have relatively positioned elements become "aware" of absolutely positioned elements?

I like absolute positoine elements so I would like to have expanding conntent while still using them if possible.

Upvotes: 3

Views: 5549

Answers (1)

ellawren
ellawren

Reputation: 947

An absolutely positioned element ignores and is ignored by everything else on the page, effectively taking it out of the document flow, so strictly speaking you can't do what you're asking.

What you could do here to get the same effect is wrap both elements in an absolutely positioned div and give them relative positioning to each other. Then the top div will always stay in the same place, and the bottom div will move down as necessary. 

<style>
    #wrapper { position:absolute; }
    #i_will_expand { position:relative; top:0px; left:0px; }
    #i_will_move_down { position:relative; top:0px; left:0px; }
</style>

<div id="wrapper">
    <div id="i_will_expand"></div>
    <div id="i_will_move_down"></div>
</div>

Keep in mind though that if you have anything else below, these elements will cover them up, but such is the problem with using absolute positioning.

Upvotes: 4

Related Questions