ZStack

Overview

Embedding layers in a ZStack (z because the layers are defined by their z-index), allows you to position layers on top of each other. A ZStack defaults to center alignment vertically and horizontally.

The ZStack assigns each new layer inside of it a higher z-axis value than the previous one, so the most recent ones will appear “on top” of the lower-rung layers and they all inherit the alignment set on the ZStack.

A ZStack can be aligned horizontally and/or vertically:

• ‍Top Leading - Layers aligned to the Leading top corner of the largest layer in the ZStack
• Top - Layers aligned to the top center of the largest layer in the ZStack
• Top Trailing - Layers aligned to the Trailing top corner of the largest layer in the ZStack

• Leading - Layers aligned in the center but to the Leading edge of the largest layer
• Center - Layers aligned in the center, vertically and horizontally of the largest layer
• Trailing - Layers aligned in the center but to the Trailing edge of the largest layer

• Bottom Leading - Layers aligned to the bottom Leading corner of the largest layer in the ZStack
• Bottom - Layers aligned at the bottom center of the largest layer in the ZStack
• Bottom Trailing - Layers aligned to the bottom Trailing corner of the largest layer in the ZStack

• Leading Text Baseline - Layers aligned to the Leading edge of the largest layer and to the baseline of its largest Text layer
• Text Baseline - Layers aligned in the center of the largest layer but at the baseline of its largest Text layer
• Trailing Text Baseline - Layers aligned to the Trailing edge of the largest layer and to the baseline of its largest Text layer