Layout
Positions
Sizing tells you how big something is. Position tells you where it goes. By default, most elements just follow the layout flow. But sometimes you need more control, like keeping something in place or letting it float above other content. That is where position comes in.
Does this matter for responsiveness?
Yes, especially when things start to move around on different screen sizes. If you use position the wrong way, your layout can fall apart.
The goal is not to fight the layout but to use position when layout rules are not enough. Think sticky headers, floating buttons, or custom placements.
Position options in Framer
Framer supports only standard CSS position types like absolute, relative, sticky, and fixed, and applies them based on how each element relates to its parent and the layout around it.
You might have seen similar options in Figma, but the logic behind them is not exactly the same. So the way you position things in your design file might not translate directly into Framer. It is worth learning how these rules actually behave in a live layout. Let’s break them down.
Relative
This is the default position in Framer. Elements are placed based on their order inside the stack and follow layout rules like direction, spacing, and alignment. The key idea is that a relative element reacts to what is next to or below it.
Absolute
An absolutely positioned element is taken out of the normal layout flow and placed exactly where you want it, relative to its parent. Unlike relative elements, it does not push or pull anything around it.
This means if one element in a stack is relative and another is absolute, the layout can break or collapse. Though sometimes, that is exactly what you want.
To make an absolute element responsive, its parent needs to be responsive too. As the parent resizes, the absolute element will adjust its position accordingly. You can define its position from each edge (top, bottom, left, right) in pixels.
Sticky
Sticky elements scroll along with the page until they reach a specific point, then they stick in place. This only works if all parent stacks are set to visible and if the sticky element has enough space to scroll within.
To use sticky positioning, wrap both the sticky element and the scrollable content in the same parent stack. A common example: the section titles on this page: they stick to the top of the screen as you scroll through the content.
Don’t forget to give your sticky element a higher Z-index than the content so it stays on top. Also add a background color to avoid transparency when it overlaps other content.
Fixed
A fixed element stays in the same place on the screen, no matter how much the user scrolls. It is always positioned relative to the viewport, not to any layout or parent.
What is Z-index?
Even though the left panel in Framer might look similar to the layer panel in Figma or Sketch, it does not control layer depth. Instead, it defines the order of elements in the layout.
Layering is handled by the CSS Z-index property. The higher the number, the higher up the element appears visually.
In Framer, Z-index can be set between 0 and 10, and the default is 0. You will not always see this in the editor by default, but you can find it in the Styles panel by clicking the + icon.
Z-index: 1
Z-index: 2
Z-index: 3
