Skip to main content

What it is

Positioned lets you place one child component at an exact spot inside a Stack.

What it’s best for

Use it when you need one visual element anchored to a corner, edge, or specific spot on the canvas.

When to use it

  • Add a badge on top of an image
  • Place a close action in the top corner
  • Float a small callout over a hero section
  • Add decorative accents without changing the main layout

When not to use it

  • Do not use it as a general-purpose layout container. Use Stack for normal layout.
  • Do not use it outside a Stack.
Positioned only works when it sits inside a Stack.

How to add it in the dashboard

  1. Open the screen and select the Stack where the overlay should appear.
  2. In the Components panel, add Positioned.
  3. Select the positioned item on the canvas.
  4. In the properties panel, set top, right, bottom, or left spacing.
  5. Add the child component you want to show inside it.

Key parameters

ParameterWhat it changesWhen to adjust it
TopPushes the child down from the top edgeUse it for top badges or close actions
RightPushes the child in from the right edgeUse it for top-right or bottom-right overlays
BottomPushes the child up from the bottom edgeUse it for labels or actions near the footer
LeftPushes the child in from the left edgeUse it for anchored callouts or icons
WidthFixes the child widthUse it when the overlay needs a controlled footprint
HeightFixes the child heightUse it when the overlay should stay visually consistent

Example use cases

  • A “New” badge on a product image in onboarding
  • A skip or close action pinned to the corner of a modal screen
  • A small trust label placed over a plan comparison visual

Best practices

  • Use it sparingly. One or two overlay elements are usually enough.
  • Keep the main message readable even with overlays in place.
  • Test placement against long text and different media crops.

Common mistakes

  • Using it to build the whole screen instead of only the overlay piece
  • Placing interactive items where they cover important content
  • Adding too many floating elements and reducing clarity