absolute positioned div inside of relative positioned div?

Question

Hi there,

Most people are aware of

Using absolute positioning on a div whose parent is set to position: relative
will cause the absolute positioned div to become relative to the parent div instead of the body.

My question is, is there a way to remove this effect?

I.E The parent div needs to be set as position relative so it will sit in the layout, however the absolute div needs to be relative to the body, not the parent div.

How can I achieve this?

Answer 1

• Remove the absolute from the inner element
• Move the absolute to outside of the relative positioned div
• Use javascript to calculate offset and use negative offsets, this is hacky and is not recommended. not reliable either.

Answer 2

No, you can't break out of the Containing Block, short of using position: fixed which sets position relative to the viewport (so it scrolls along with the page).

You'll need to move the absolute div out of the relative parent, or find another way of solving whatever layout problem caused you to use position: relative. (If it's a hasLayout problem in IE, try other typical hacks like zoom: 1 or an IE-only height: 1%.)