Position fixed with transform (behavior exploration)
Hi everyone.
For the last 2 days I have been tinkering with this 'unknown behavior' where If I used transform to a container, the fixed position inside it would no longer work.
The only way I managed to 'fix' this is by moving the element outside the container but that comes with a set of different problems such as breaking the layout and so on.
If you have a better approach to this, I would love to see it.
Thank you in advance,
Ylli.
(codepen for a simple illustration)
https://codepen.io/yesm4n/pen/PoLpKxL
8 Replies
MDN Web Docs
position - CSS: Cascading Style Sheets | MDN
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
according to mdn using tranform changes the containing block
@Mannix ok, thats interesting. Glad you found that. Will have to explore more and see if I can do something to 'make as little changes as possible'.
In any case, thank you sir.
There are some properties that change the containing block. As you’ve seen transform is one of them, opacity is another. Trying to remember the others
it's a bit annoying, for sure, because some things that create a new containing block won't impact fixed elements, whereas other things will.
I will ask though, why taking it out of that element breaks the layout though. Normally we use fixed because we want it fixed to the viewport, and not in flow with the other things...
Maybe
position: sticky; is what you're after?A bit hard to explain and I can't disclose all the layout here because it is a confidential website but I'd be willing to show you over a dm.
BUT basically –
– I have a loading screen (which after 3 seconds) a container (with 6 sections in it moves up).
– My first section (from the ones who just moved up) has the navbar in it and is not allowing me to stick/fix the navbar to the containers that got pulled up because of the transform behavior. So instead of creating 6 separate navbars, I thought I could find a way to just drag the 1st one around, but so far I've been unsuccessful.
And as for the record sticky only follows me 1 section, whereas fixed does not even move.
The only thing I can think of would be using position: sticky, but having the nav be a part of the entire container that has the 6 sections, and not inside the first section itself.
I see, that makes sense. Will probably opt for that since I can't seem to find a better solution so far. Thank you Kevin.