Can we force a '%' value to be out of height instead of width ?
Hi there !
I am trying to position a fixed element using percentages (to keep them fixed within their containers).
In need to position it to the right of my container, and at 50% height. But...
As you can see in the screenshots 1 and 2, the right item (the horrible red-blue-white-gremlin) gets a top margin relative to container's width.
Here is the code used to position the little monster :
I suppose there would be JS solutions to that problem, but i wonder if CSS haves a way around it.
If you know any (or know that there is none), i'd be happy to know.
Thank you 🙂
9 Replies
Have you rotated this guy? Or did he come into the markup in this position? If he has been rotated the margins don’t refer to the same directions anymore !
i don't think u can make an element be position of fixed with respect to any other element in css
it can only be fixed with respect to the viewport
i can recall trying to make an element with position fixed be relative to it's parent but i couldn't
even the % value for height and width doesn't mind the parent
This is correct but i think thats point here that its fixed to the viewport, doesnt look like there is a parent other than the body
https://codepen.io/pen/?editors=1100 i think this is what you're trying to accomplish but i may be wrong
You can look into container units
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries#container_query_length_units
MDN Web Docs
CSS container queries - CSS: Cascading Style Sheets | MDN
Container queries enable you to apply styles to an element based on the size of the element's container. If, for example, a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts.
Container queries are an alternative to media queries, which apply styles to elements based on viewport si...
No, the two elements are flex container (every dot is a div), and one haves a direction of column and the other of row.
the pen is empty for me
Didn't know these units existed, thats great, thanks !
But i think i'm making it the wrong way. The page contains multiple rows of vertical scrollable elements (like a netflix display or something like that). For what i saw of theses kind of displays, the element are not scrolled on but moved. Might be because of this 'fixed' issue
I'm still not clear about your needs after reading it again, have you trid using absolute positioning relative to the container? Like top, left. bottom, right
They are using
position: fixed;