How to Use Alignments in SwiftUI — Z-Stack Alignment

Mark van Wijnen
7 min readApr 12, 2022

This is the third part in the ‘SwiftUI Layout System’ series and the fifth part in the subseries about ‘How to Use Alignments in SwiftUI’. In this part we will talk about how alignments work along the z-axis in a Z-Stack.

The SwiftUI Layout System

(More to come …)

Z-Stack Alignment

If you read the previous parts of the series you may have noticed that I used the H-Stack in all of the examples. This has been done on purpose to get you familiar with the fundamentals of the alignment process.

However, we can easily take the concept and apply it to the V-Stack with one exception. The H-Stack uses VerticalAlignment for vertical positioning along the y-axis but for the V-Stack we need to use HorizontalAlignment for horizontal positioning along the x-axis.

But how does this concept apply to a Z-Stack with its views positioned along the z-axis?



Mark van Wijnen

macOS/iPadOS/iOS/watchOS/visionOS developer and SwiftUI enthousiast. “Stay Hungry, Stay Foolish!” — Steve Jobs