Joseph
3:53
Positioning modes in Framer
Learn how Framer positioning modes work and choose the right relationship for each layer. Relative layers flow with siblings, absolute layers attach to a parent Frame, fixed layers stay anchored to the browser window, and sticky layers remain in view only while their parent section is scrolling.
Lesson details
Responsive layouts in Framer use relative positioning for most page content. A Stack or grid controls how relative children flow with their siblings, including direction, gaps, padding, and alignment. Relative layers can also fill the available width or height while respecting the space used by nearby layers.
Absolute positioning removes a layer from that flow and measures it against the parent Frame. Pin it to the top, right, bottom, or left when the edge relationship matters. This mode works well for badges, decorative artwork, and other elements that need to overlap content.
Fixed and sticky layers measure against the viewport. A fixed layer stays in the same browser position while the page scrolls. A sticky layer moves with the page until it reaches its set edge, stays there within its parent section, then leaves when the parent scrolls away.
Frequently asked questions
How does relative positioning work in Framer?
Relative layers flow with their siblings according to a parent Stack or grid. The parent controls direction, gap, padding, and alignment. Use relative positioning for most responsive page content because layers adapt when their container or nearby content changes size.
When should I use absolute positioning?
Use absolute positioning when a layer must leave the normal flow and sit at a specific place inside its parent Frame. Pinning a badge to a corner or placing decorative artwork behind a hero are common examples.
What does fixed positioning do in Framer?
A fixed layer anchors to the browser viewport instead of a page section. It stays in the same visible position while the visitor scrolls. Fixed navigation bars and floating action buttons often use this mode.
How is sticky positioning different from fixed positioning?
A sticky layer scrolls with its content until it reaches a chosen viewport edge. It remains there only while its parent section is passing, then leaves with that parent. A fixed layer stays anchored for the entire page.
How do I choose the right positioning mode?
Identify what the layer should be measured against. Use relative for siblings, absolute for the parent Frame, fixed for the viewport throughout the page, and sticky for the viewport within one parent section.
Continue watching
Load more