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 October 5th 2019

Fully updated for Xcode 11 GM

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("example-image")
    Text("Hacking with Swift")
        .font(.largeTitle)
        .background(Color.black)
        .foregroundColor(.white)
}

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("example-image")
    Text("Hacking with Swift")
        .font(.largeTitle)
        .background(Color.black)
        .foregroundColor(.white)
}

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.

How to layer views on top of each other using ZStack

Similar solutions…