---
title: ZStack
framework: swiftui
role: symbol
role_heading: Structure
path: swiftui/zstack
---

# ZStack

A view that overlays its subviews, aligning them in both axes.

## Declaration

```swift
@frozen nonisolated struct ZStack<Content> where Content : View
```

## Mentioned in

Building layouts with stack views Laying out a simple view Adding a background to your view Aligning views within a stack Creating performant scrollable stacks Making fine adjustments to a view’s position Picking container views for your content

## Overview

Overview The ZStack assigns each successive subview a higher z-axis value than the one before it, meaning later subviews appear “on top” of earlier ones. The following example creates a ZStack of 100 x 100 point Rectangle views filled with one of six colors, offsetting each successive subview by 10 points so they don’t completely overlap: let colors: [Color] =     [.red, .orange, .yellow, .green, .blue, .purple]

var body: some View {     ZStack {         ForEach(0..<colors.count) {             Rectangle()                 .fill(colors[$0])                 .frame(width: 100, height: 100)                 .offset(x: CGFloat($0) * 10.0,                         y: CGFloat($0) * 10.0)         }     } }

The ZStack uses an Alignment to set the x- and y-axis coordinates of each subview, defaulting to a center alignment. In the following example, the ZStack uses a bottomLeading alignment to lay out two subviews, a red 100 x 50 point rectangle below, and a blue 50 x 100 point rectangle on top. Because of the alignment value, both rectangles share a bottom-left corner with the ZStack (in locales where left is the leading side). var body: some View {     ZStack(alignment: .bottomLeading) {         Rectangle()             .fill(Color.red)             .frame(width: 100, height: 50)         Rectangle()             .fill(Color.blue)             .frame(width:50, height: 100)     }     .border(Color.green, width: 1) }

note: If you need a version of this stack that conforms to the Layout protocol, like when you want to create a conditional layout using AnyLayout, use ZStackLayout instead.

## Topics

### Creating a stack

- [init(alignment:content:)](swiftui/zstack/init(alignment:content:).md)

### Supporting symbols

- [ZStackContent3D](swiftui/zstackcontent3d.md)

### Initializers

- [init(alignment:spacing:content:)](swiftui/zstack/init(alignment:spacing:content:).md)

## Relationships

### Conforms To

- [View](swiftui/view.md)

## See Also

### Layering views

- [Adding a background to your view](swiftui/adding-a-background-to-your-view.md)
- [zIndex(_:)](swiftui/view/zindex(_:).md)
- [background(alignment:content:)](swiftui/view/background(alignment:content:).md)
- [background(_:ignoresSafeAreaEdges:)](swiftui/view/background(_:ignoressafeareaedges:).md)
- [background(ignoresSafeAreaEdges:)](swiftui/view/background(ignoressafeareaedges:).md)
- [background(_:in:fillStyle:)](swiftui/view/background(_:in:fillstyle:).md)
- [background(in:fillStyle:)](swiftui/view/background(in:fillstyle:).md)
- [overlay(alignment:content:)](swiftui/view/overlay(alignment:content:).md)
- [overlay(_:ignoresSafeAreaEdges:)](swiftui/view/overlay(_:ignoressafeareaedges:).md)
- [overlay(_:in:fillStyle:)](swiftui/view/overlay(_:in:fillstyle:).md)
- [backgroundMaterial](swiftui/environmentvalues/backgroundmaterial.md)
- [containerBackground(_:for:)](swiftui/view/containerbackground(_:for:).md)
- [containerBackground(for:alignment:content:)](swiftui/view/containerbackground(for:alignment:content:).md)
- [ContainerBackgroundPlacement](swiftui/containerbackgroundplacement.md)