Positioned

Fission

Product

▾

Setup

›

›

Positioned is the absolute-positioning helper for layered layouts.

It is designed to be used inside a parent such as ZStack, where one child should sit at a specific edge, corner, or offset relative to the stack's bounds. Common uses include badges, tooltips, floating buttons, corner actions, or popups anchored inside an overlay surface.

Use Positioned when placement relative to parent edges matters. Do not use it for ordinary spacing in a row or column. Absolute positioning is powerful, but it is the wrong tool for most everyday layout.

Example

use fission::prelude::*;
let badge = Positioned {
    top: Some(8.0),
    right: Some(8.0),
    child: Some(Text::new("New").into()),
    ..Default::default()
}
.into();

Field table

Field	Type	Meaning	Notes / default behavior
id	Option<WidgetId>	Stable widget identity.	Defaults to None.
left	Option<f32>	Distance from the parent's left edge.	Defaults to None.
top	Option<f32>	Distance from the parent's top edge.	Defaults to None.
right	Option<f32>	Distance from the parent's right edge.	Defaults to None.
bottom	Option<f32>	Distance from the parent's bottom edge.	Defaults to None.
width	Option<f32>	Explicit width for the child region.	Defaults to None.
height	Option<f32>	Explicit height for the child region.	Defaults to None.
child	Option<Widget>	The positioned child.	Defaults to None.

Placement behavior

If you provide both left and right, the available width is derived from the remaining horizontal space. Likewise, if you provide both top and bottom, the available height is derived from the remaining vertical space. Explicit width and height tighten the child constraints further.

If only one edge is provided on an axis, the child keeps its natural size on that axis and is placed from that edge.

Specific advice

Positioned reads best when the placement is part of the design, not a last-minute correction. If you find yourself using it repeatedly just to fix normal layout problems, step back and reconsider whether the parent should really be a row, column, or container instead.

Production checklist

For Positioned, review the fields that change behavior before treating the widget as finished: id, left, top, right, bottom, width. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.

•

When child widgets are generated from data, give reordered or filtered rows an explicit WidgetId so retained local state and scroll behavior do not drift between items.

•

Set id only when identity must be stable across filtering, reordering, diagnostics, or tests; otherwise let Fission derive identity from structure.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Prefer parent layout and design-system sizing first; use explicit size or spacing fields when the product layout requires that constraint on this widget specifically.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same Positioned setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

ZStack, Overlay, and absolute_fill(...).