Overview
Use the Overlay modifier to place one or more layers in front of another layer. By default, the Overlay modifier inserts a Rounded Rectangle in front of the layer that you apply the modifier to.
With the foreground Rounded Rectangle selected in the Layers panel, you can adjust the shape from the Inspector panel.
You can also replace the foreground layer with other elements from the Insert + menu by deleting the Rounded Rectangle and inserting something new.
Your foreground can comprise of more than one layer. When you stack two layers on top of each other, an implicit ZStack is applied so, in some cases, you may want to embed them in either a VStack or an HStack to make them visible.
⬇ Note
Hold and drag the layers in the Layers panel to set their order.
Alignment
The Overlay modifier comes with an Alignment parameter used to position the implicit ZStack that groups the foreground layers. By default, the Overlay modifier uses Center Alignment, but you can also set it to align to the Leading or Trailing edge.
If you specify an Alignment for the foreground layer, it applies to the implicit ZStack rather than to the individual layers within the Overlay modifier. The foreground layers will move together as a unit, with the smallest layer remaining in the center of the stack.
For example, the white Rectangle and the Text layers move as a unit to align the stack to the Leading or Trailing edge of the modifier layer, with the Text layer remaining centered on the Rectangle in each case.
Top Leading - The foreground layers are aligned to the Leading top corner of the modifier layer
Top - The foreground layers are aligned to the top center of the modifier layer
Top Trailing - The foreground layers are aligned to the Trailing top corner of the modifier layer
Leading - The foreground layers are aligned in the center of the screen, but to the Leading edge of the modifier layer
Center - The foreground layers are aligned in the center of the screen, vertically and horizontally of the modifier layer
Trailing - The foreground layers are aligned in the center of the screen, but to the Trailing edge of the modifier layer
Bottom Leading - The foreground layers are aligned to the bottom Leading corner of the modifier layer
Bottom - The foreground layers are aligned at the bottom center of the modifier layer
Bottom Trailing - The foreground layers are aligned to the bottom Trailing corner of the modifier layer
You can also align your foreground layer to the Baseline of a Text layer and to the Leading, Center, or Trailing edges.
To control the placement of individual layers inside the foreground layer, either use a different Overlay modifier for each item or wrap the layers in an explicit ZStack that has its own alignment.
