How we used to hack in absolute position in Figma

How to tell one layer to ignore auto layout without the real feature, explained using the real browser CSS property “position: absolute”.

Truth me told, I make the same face Drake does when I DIY. Made using ImgFlip.

With the May 2022 update to auto layout in Figma, absolute position is now a problem of the past. For a couple years, though, mixing absolute positioning with auto layout has been a highly requested feature. One of the oldest spectrum discussions is from 2020, and the official feature request thread amassed 413 votes. We can theorise as to why it’s taken so long, and I can show you how we used to do it—using hacks and workarounds of the past.

You can read the official docs in Figma’s absolute positioning guidance.

All shortcuts are for Mac, but Windows and PC users can replace Cmd for Ctrl and Option for Alt.

Browsers and absolute positioning

Photo by Denny Müller on Unsplash

To understand how the absolute positioning hack works in Figma, we need to establish the basics of how it works for real in your browser.

The position attribute

First is that everything you see on a web page has a position attribute. By default this is set to static, and means that it doesn’t have any special properties. Elements on the page will simply be displayed using the default display flow and order of the browser. Changing this to one of the 5 possible attributes gives us different behaviours.

How “absolute” position works

The magic property of something being absolutely positioned lies in this behaviour:

An element … is positioned relative to the nearest positioned ancestor. w3schools.

This green div has 3 elements: 2 are positioned statically, and 1 is positioned absolutely. w3schools Tryit Editor.

By ancestor, we simply mean the parent element. On the web that’s often a div. In addition, you typically need to set the left and top…