How to Use Absolute Position and Z-Index in Figma Auto Layout

Auto layout places every child for you, one after another, spaced by the gap and padding. That's why you can't drag a child to an arbitrary spot: Figma snaps it back into the sequence. Absolute position switches that off for one layer. Figma calls it Ignore auto layout in the UI, and it's the tool for anything that should float over the stack: a notification dot on an avatar, a "New" tag on a card corner, a decorative shape behind the content.

The rest of the children keep behaving normally. The absolute child simply stops taking up space in the row or column.

Not a keyboard shortcut. The closest thing is a drag modifier: on Mac, hold Control while you drag an object into an auto layout frame and it lands with absolute position already on. Figma's help page prints a different letter for Windows that we couldn't confirm, so test it in the app or use the sidebar button, which works everywhere.

Two help pages give different keys for bring to front and send to back, so the table lists both. Open the shortcuts panel with Ctrl+Shift+? to see which one your version uses. Other auto layout keys are in the auto layout shortcut guide.

This is one of the most-viewed questions on the Figma forum (around 59k views on the z-index thread). Children in an auto layout frame can overlap, for example when one is set to absolute position. The frame decides which one is drawn on top with Canvas stacking, found in the auto layout settings:

• Last on top (the default): each child covers the one before it. The last child in the list is on top.
• First on top: the order flips, so the first child covers the ones after it. This is what you want for stacked avatars where the leftmost face sits in front.

Canvas stacking changes the drawing order without touching the flow, so your layout stays the same. If reordering layers moves the child in the layout too, use canvas stacking instead.

Pick based on whether the layer should still take up space. Stacked avatars, overlapping cards and tabs that sit on top of each other all belong in the flow, so keep them as normal children and set canvas stacking. A badge pinned to the corner of a card, a close button in a modal, or a decorative blob behind the content shouldn't push anything around, so give those Ignore auto layout.

Outside auto layout, layer order is plain: drag layers up or down in the Layers panel, or press ⌘] / ⌘[ (Ctrl+] / Ctrl+[) to move the selection one step forward or back. Higher in the Layers panel means drawn on top.

1. It's a child of an auto layout frame. Auto layout controls its position. Change the frame's alignment, gap or padding, or click Ignore auto layout to place it freely.
2. It's locked. Unlock it with ⇧⌘L / Ctrl+Shift+L or the lock icon in the Layers panel.
3. You're dragging the parent instead of the child. Double-click, or press Enter to select the child.

For how children resize alongside an absolute layer, see Fill container vs Hug contents, and for the basics of gap, padding and direction, start with how to use auto layout in Figma.