How to change the order of view layering using Z index >

How to layer views on top of each other using ZStack

Paul Hudson @twostraws May 12th 2022

Updated for Xcode 14.0 beta 1

SwiftUI has a dedicated stack type for creating overlapping content, which is useful if you want to place some text over a picture for example. It’s called ZStack, and it works identically to the other two stack types.

For example, we could place a large image underneath some text like this:

ZStack {
    Image("niagara-falls")
    Text("Hacking with Swift")
        .font(.largeTitle)
        .background(.black)
        .foregroundColor(.white)
}

Download this as an Xcode project

“Hacking with Swift” in white text on a black rectangle, centered over an image of Niagara Falls.

Like the other stack types, ZStack can be created with an alignment so that it doesn’t always center things inside itself:

ZStack(alignment: .leading) {
    Image("niagara-falls")
    Text("Hacking with Swift")
        .font(.largeTitle)
        .background(.black)
        .foregroundColor(.white)
}

Download this as an Xcode project

“Hacking with Swift” in white text on a black rectangle, touching the left edge of an image of Niagara Falls.

However, it doesn’t have a spacing property because it doesn’t make sense. Instead, you should use the offset() modifier as shown in How to adjust the position of a view using its offset.

Sponsor Hacking with Swift and reach the world's largest Swift community!

How to layer views on top of each other using ZStack

Similar solutions…