ZStack

The ZStack view is a layout container where elements, or subviews, are arranged as overlaying one another (back-to-front).

Syntax

var body: some View {
  ZStack {
    Subviews here
  }
}

The ZStack view rests within the body of View.

Example

In the snippet below, two Rectangle subviews are stacked on top of one-another:

var body: some View {
  ZStack {
    Rectangle()
      .fill(.black)
      .frame(width: 100, height: 100)
    Rectangle()
      .fill(.pink)
      .frame(width: 100, height: 100)
      .offset(x: 25, y: 25)
  }
}

to clipboard
Copy to clipboard

Order matters here; the bottom-most subview will appear on top. For visual clarity, the top-most rectangle view’s x- and y-coordinates were offset by 25.

This will display the following: