The Position block sets the CSS position mode and offsets via a visual 3×3 “aim” widget; optional z-index, order, grid placement, and self-alignment.
Where: Right sidebar → Layout & Transform → Position — Select an element and open Position
Key ideas
- Position modes: static / relative / absolute / fixed / sticky.
- Aim widget: Click a corner/edge to set top/right/bottom/left; click center to center via margin:auto.
Steps
- Open Layout & Transform → Position.
- Pick a position mode.
- Use the aim widget to set offsets or centering.
- Add z-index/order with “+” if needed.
Position mode and containing block
- Static and relative participate in normal layout; absolute and fixed are removed from normal flow; sticky follows its scroll container within its constraints.
- The aim widget sets top/right/bottom/left offsets from the chosen edge or corner; center can toggle margin:auto centering.
- An absolutely positioned element is positioned relative to its containing block, so inspect the parent when offsets seem unexpected.
Optional placement properties
- Add z-index when stacking order must be controlled.
- Order applies in supported layout contexts, while grid row/column and self-alignment apply to grid/flex placement.
- Use the smallest set of positioning properties needed; offsets can overlap content or create responsive problems.
Tips
- Try parent layout controls before using absolute positioning for an element that should remain in the document flow.