Layering with ZStack
Overlap views back to front for depth.
Layering with ZStack is a free SwiftUI Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Stacking in Depth
VStack goes down and HStack goes across, but sometimes you want views to overlap. That calls for a stack that works in depth. 🧱
Meet ZStack
A ZStack layers its children back to front, like sheets of glass piled on top of each other. Later views sit above earlier ones.
Your First ZStack
Inside a ZStack, the first child is the back layer and the last child is the front. Here the text sits on top of the colored background.
ZStack {
Color.blue
Text("On top")
}Back to Front Order
The drawing rule is simple: earlier children are behind, later children are in front. The last view you write wins the top spot.
Backgrounds Made Easy
A ZStack is a natural way to put a color or image behind your content. Drop a Color first, then layer your views on top of it.
Centered Overlap
By default a ZStack centers every child over the same point, so layers share one middle. You change this with an alignment argument.
ZStack(alignment: .topLeading) {
Color.gray
Text("Corner")
}Badges on Icons
A common ZStack pattern is a badge floating over an icon, like an unread count perched on the corner of a bell.
Sizing the ZStack
A ZStack takes the size of its largest child. A tiny label over a big image gives the stack the image's full footprint.
Cards with Overlays
Layer a gradient and a title over a photo to make a card. ZStack lets text stay readable on top of any background image.
ZStack {
Image("cover")
Text("Caption")
}ZStack Is a View
Like the other stacks, a ZStack is one view, so padding, frame, or background modifiers apply to the whole layered group together.
When to Reach for ZStack
Use a ZStack whenever views must overlap: a background behind content, a watermark, a badge, or text floating over an image.
Quick Check
Let's test your grasp of ZStack layering.
Recap: Layering Views
Awesome! A ZStack layers children back to front, centers them by default, and is your tool for backgrounds, badges, and overlapping cards. ✨
Frequently asked questions
Is the “Layering with ZStack” lesson free?
Yes — the full text of “Layering with ZStack” is free to read here on the web, and the SwiftUI Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO.
What will I learn in “Layering with ZStack”?
Overlap views back to front for depth. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Layering with ZStack” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Stacking Views Vertically
- Rows with HStack
- Layering with ZStack
- Spacing & Alignment in Stacks