Question

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

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%.)