Inkbridgeinkbridge
Free

Absolute Positioning

Elements with `absolute` are pulled out of the auto-layout flow and placed as floating layers — just like CSS position: absolute.

How it works

When the plugin encounters `absolute` on an element it sets Figma's `layoutPositioning` to `ABSOLUTE`, removing the node from the parent's auto-layout flow. Offset classes then place the node: `top-4 left-4` maps to x/y coordinates, `inset-0` stretches the element to fill its parent, and `inset-x-0` / `inset-y-0` expand along one axis. The most common use case is decorative overlays — gradient blobs, badge indicators, or floating action buttons — that sit on top of normal content without pushing siblings around.

Usage

  1. 1

    Add `absolute` to the element you want to float out of the layout flow.

  2. 2

    Add `relative` (or any positioning context) to the parent — the plugin uses the parent frame as the containing block.

  3. 3

    Use `top-{n}`, `bottom-{n}`, `left-{n}`, `right-{n}` to set the offset in Tailwind spacing units (1 unit = 4px).

  4. 4

    Use `inset-0` to stretch the element to cover its parent completely, or `inset-x-0` / `inset-y-0` for one axis only.

  5. 5

    Negative offsets like `-top-4` are also supported.

absolutepositioningoverlaylayout

Related