How to "clear" a position relative? - css

Question

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;
}

Answer 1

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.

Answer 2

The way I was able to solve this problem was using the keyword "initial". This restores any property to it`s default value.
#yourElement {
position:initial;
}
For more information, please, refer to : https://www.w3schools.com/cssref/css_initial.asp
and https://www.w3schools.com/cssref/pr_class_position.asp
Hope this helps!

Answer 3

.container {
position: relative;
left: 100px; /*or any other value*/
overflow: visible
}
.absolute {
position: absolute;
left: 0;
}

Answer 4

I had the same problem and I didn't like the answer "don't use it, it's bad", because I find it useful to sometimes use these "position" properties.
Although I do understand the argument, that a "position: relative" element might contain other elements depending on the container's property. But then, maybe, this "overload" of the meaning "relatively positioned" should rather be diversified in the specification. Because I don't want to position my regarding element in an absolute way, but relative to its container - which I can't do other than using this relative positioning (can I?).
So I found this solution.
Usually, I define breakpoints as "size XY down", like this:
#wide-screen-down: ~'(max-width:1199px)';
#desktop-down: ~'(max-width:991px)';
#tablet-down: ~'(max-width:767px)';
etc.
Which is fine, usually, but in this case, I just didn't want an element to be positioned relative when on phone size. So I defined one extra breakpoint:
#phone-up: ~'(min-width:481px)';
So, the "position: relative" is only set on a certain min-width! Instead of setting it and later trying to unset it - which didn't work for me with any of the keywords (unset, initial, inherit).
This doesn't really answer the OP's question - resp. the answer is, there is no way to unset the "position: relative" setting, at least in Chrome 86 on Linux. The workaround is the above, in case you can tie this property to a screen size.