Z-order determines which elements appear in front of or behind other elements. Control the stacking order to create complex overlapping designs.
Keyboard Shortcuts
| Action | macOS | Windows/Linux |
|---|---|---|
| Bring to Front | Cmd + ] | Ctrl + ] |
| Send to Back | Cmd + [ | Ctrl + [ |
| Bring Forward | Cmd + Alt + ] | Ctrl + Alt + ] |
| Send Backward | Cmd + Alt + [ | Ctrl + Alt + [ |
Understanding Z-Order
Elements are stacked in a specific order within their parent container. Elements with higher z-index values appear in front of elements with lower values.
- Sibling elements share the same parent and are ordered relative to each other
- Root-level elements (no parent) are stacked on the canvas
- Child elements within a frame are stacked within that frame
Arrange Operations
Bring to Front
Moves the selected element(s) to the very front, above all siblings.
- Shortcut: Cmd + ]
- Menu: Object > Arrange > Bring to Front
Send to Back
Moves the selected element(s) to the very back, behind all siblings.
- Shortcut: Cmd + [
- Menu: Object > Arrange > Send to Back
Bring Forward
Moves the selected element(s) one step forward in the stacking order.
- Shortcut: Cmd + Alt + ]
- Menu: Object > Arrange > Bring Forward
Send Backward
Moves the selected element(s) one step backward in the stacking order.
- Shortcut: Cmd + Alt + [
- Menu: Object > Arrange > Send Backward
Layers Panel
The Layers panel shows the visual stacking order:
- Elements at the top of the list are in front on the canvas
- Elements at the bottom of the list are behind on the canvas
- Drag elements within the list to reorder them
Tip: The Layers panel provides the most intuitive way to understand and adjust z-order - simply drag layers up or down to reposition them in the stacking order.
Context Menu
Right-click any element to access arrange options:
- Bring to Front - Move to top of stack
- Send to Back - Move to bottom of stack
- Bring Forward - Move up one level
- Send Backward - Move down one level
Within Frames
Z-order works within frames too:
- Children of a frame have their own stacking order
- Arrange operations affect only siblings (elements with the same parent)
- The frame itself has a z-order relative to other root-level elements
Best Practices
- Use frames to group related elements with their own internal stacking
- Use the Layers panel to visualize complex stacking relationships
- Remember that rearranging z-order supports undo/redo