Howdy everyone,
In the webflow interface, when position an element as Fixed, I see that it’s automatically relative to Body. How can I change that to, say Viewport?
I need to style a navigation that sticks to the top of the viewport, even on scroll.
Thanks!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hey Alex,
Your definition of position:fixed is not correct.
“An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.”
CSS Layout - The position Property
Because of that, what it is that you are trying to create is not clear as well 
So, can you refraze your question? or even better, show an example to what you want to create?
Hi avivtech,
Theoretically yes, it should be relative to the viewport by default, but in the interface it seems to be relative to Body, as you can see here:
This is the WIP project, for context: https://s2c.webflow.io/
Thanks!
Hi @Alex_Hartan, in the context of the designer and fixed positioning, the Body IS the viewport.
When you apply a position fixed, it is always positioned to the Body, that is standard, normal behavior for fixed position elements.
The Sticky feature in Webflow allows you fix an item while it’s parent element is scrolling and then reverts back to static, absolute or relative depending how the element is styled initially.
Learn more about the Sticky feature if you want to have fixed position elements only while a certain section or element is visible: https://webflow.com/feature/position-sticky
If you position an element as absolute, it will be positioned absolutely to the first parent element having a relative position, or if no parent element having a relative position, the element will be absolute to the Body (the viewport).
I hope this helps.
Thanks, I fixed it now, with position: sticky!