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
- Open the screen and select the Stack where the overlay should appear.
- In the Components panel, add Positioned.
- Select the positioned item on the canvas.
- In the properties panel, set top, right, bottom, or left spacing.
- Add the child component you want to show inside it.
Key parameters
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
