Sahand Nayebaziz on Jan 4, 2022

The next time you’re creating a design that needs to lay elements over or behind other elements, try using one of the Overlay or Background modifiers instead of reaching for ZStack. Why? Because for most use cases, Overlay and Background are much easier to work with because they naturally contain sizing to the parent element. Let me tell you more.

HStack and VStack feel indispensable, but ZStack comes with a hidden tax that can make your design a lot harder to work with: it can be really easy to accidentally get into a situation where your design elements aren’t even “over” each other anymore like you wanted them to be. This is because ZStack doesn’t itself guarantee that, say, your bottom-most design element is the big, background one and that anything adding over that will fit inside of it.

In so many common design scenarios, that is probably what you want. Maybe it’s a photo with a heart icon on the bottom car to act as a favoriting button, or maybe it’s a status message that says “Successfully signed in” and you want a rounded, material platter beneath the message.

In these cases, try either creating the base element as a normal element, and placing the over element into the .overlay modifier, or create the element that determines the sizes, like the status message, and add the behind element into the .background modifier.

In conclusion, you’ll have a nicer, faster design experience if you reach for Overlay and Background more often and ZStack less often. Much less often than you reach for HStack and VStack which are truly indispensable and very difficult to mess things up with.

© Fun Focus Software LLC
SwiftUI is a trademark of Apple Inc., registered in the U.S. and other countries.