How to use Fixed and Absolute positioning in Stacks
Pin layers to the Viewport regardless of your page set-up, or use absolute positioning within Stacks to break out of its flow.
By default, layers within Stacks are positioned relatively. This allows you to sort layers with ease. However, sometimes you might want to position something absolutely within a Stack. This often happens if your actual page is a Stack (so it resizes with the content) like blog pages, or with other common layouts like pricing pages. For instance, let’s consider a card layout of a pricing page that is set-up as a stack. Here, you’d likely want one layer (say, a badge) to break free from its layout rules.
Once you select the layer, in the Position section you can set the type to be Absolute. After setting its pinning constraint as desired (e.g. 20px from the top and the right) you will be able to add features lines to the card stack, with the discount chip layer remaining absolutely positioned as desired.
The same applies to Fixed positioning, but that only works on a page level. Meaning, you can only use this on layers that are nested directly within the page. If your page is a Stack, this allows you to break out of its layout rules, like when designing a topbar or a sidebar. A fixed layer will always remain in view, regardless of the scrolling position. An absolutely-positioned layer can also break out its parents layout, but it will still be positioned relative to its parent, in context of the webpage.
So, to summarize:
Fixed: always in view
Fixed: only for direct children of the web page
Fixed: for topbars and sidebars
Absolute: break out of parent stack layout
Absolute: for badges and backgrounds
