css container property blocks position absolute element from positioning correctly
I recently tried using the CSS
container property for the first time and encountered a situation where I may need to remove it and continue without it. Please refer to the attached image for clarification.
I have a container to which I applied the container property to utilize @container queries instead of @media queries. Within this container, there is a child element that I wanted to align to the right of the viewport. I applied position: absolute; right: 0; to the child element, but instead of moving to the far right of the viewport, it stopped at the borders of the container element as if the container had position: relative; applied to it.
I made sure that none of the parent elements, up to the container element, have position: relative; set, and I confirmed that they are all unset.
Is there a way to work around this issue? Doesn't encountering such a scenario make it a bad idea to use the container property?
5 Replies
If you want to position the element relative to viewport then the position fixed is a better option.
Position absolute will always position itself to its relative parent.
with the position fixed, there is no difference. I made a little codepen if you would like to play around https://codepen.io/amgalitzky/pen/NWEyEjz
Yes, you are right. container-type is causing this.
position fixed won't work inside container-type 'size' or 'inline-size'
looks like container acts as a containng block just like position: relative would
it's interesting that even fixed can't escape it
Exactly my point! In my opinion, this makes
container a bit dangerous to use. Because you never know what you'll need to add in the future & you may find yourself in a situation where you need to remove the container & restructure your entire container element with all elements relying on it, when you find yourself in a situation where you need a fixed or absolute element to overflow the container.
It looks more like a CSS that should be fixed or they should create a way around it.