How to "clear" a position relative?

css, position

Solution

What you're asking for violates the intended usage of absolutely-positioned elements within a relative containing block. The CSS2 spec says:

Although the parent outer box is not actually offset, setting its 'position' property to 'relative' means that its box may serve as the containing block for positioned descendants.

Any way to do what you're asking is a hack, and you should reconsider either (a) why you need the hierarchy to be as it is, or (b) why you need the containing block to be relatively-positioned.

Problem

I want to reach the left: 0 of the body but I'm inside a position relative. Have some way to do this without change the container class? I'm looking for something like clear: both of floating objects. html: ``` <div class="container"> <div class="absolute">Content</div> </div> ``` style: ``` .container { position: relative; left: 100px; /*or any other value*/ } .absolute { position: absolute; left: 0; } ```

Original source