Position elements in a webpage

Who can use this feature

Available on all paid plans

Requires edit access to the file

Figma offers four common CSS positioning properties to help you control the placement of elements in your web design:

1. Relative: Follows the flow of content in an auto layout frame
2. Absolute: Allows you to move elements freely within their parent element
3. Fixed: Keeps elements visible on the screen
4. Sticky: Lets elements scroll, then stick to the top edge of your screen

You can change an element’s position type from the Position section of the right sidebar.

Apply relative positioning to an object

In Figma Sites, elements automatically use relative positioning when placed inside an auto layout frame.

Instead of setting explicit position values, an element’s position determined by the layout rules of its parent auto layout frame.

Adjust the auto layout properties—such as direction, alignment, and padding—on the parent frame to define how items within the frame should adapt across desktop, tablet, and mobile devices.

You can’t move elements freely in a webpage when using relative positioning, as they will always follow the layout rules of the parent. To ignore the auto layout flow, switch the element to absolute positioning.

If you’re familiar with web development, auto layout frames in Figma Sites work similarly to flexbox.

Apply absolute positioning to an object

Unlike relative positioning, absolute positioning gives you the flexibility to place elements freely within the parent container.

Change the object’s position

To change an object’s position, move the element around, or set specific values in the Constraints section of the right sidebar to pin the object to the top, bottom, left, or right. You can also use transform or alignment properties to adjust the position.

Learn more about adjusting alignment, rotation, position, and dimensions.

Apply constraints

With absolute positioning, you can set constraints to anchor an object to one or more sides of the parent layer—or to the webpage if no parent layer exists.

For example, an element positioned at 50px from the left and 100px from the top will always maintain that fixed distance from its parent’s top and left edges.

This gives you more control over how the layer responds when the parent frame is resized.

Use absolute position in an auto layout frame

An object with absolute positioning inside an auto layout frame is excluded from the auto layout flow. The object and its surrounding siblings ignore each other, even as they resize and move.

Apply fixed positioning to an object

Fixed positioning is similar to absolute positioning in that it allows you to precisely control an element's placement. However, its behavior is tied to the viewport rather than a containing element.

Layers using fixed positioning move to the top of the layers panel since fixed elements cannot have other layers placed on top of them.

Apply sticky positioning to an object

An element with sticky positioning remains in its normal flow until the user scrolls to a specific point, at which time it sticks to a defined position relative to the viewport. It continues to be visible as scrolling progresses, but stops sticking once the bottom edge of its parent container is reached.