# zIndex(_:) Controls the display order of overlapping views. ``` nonisolated func zIndex(_ value: Double) -> some View ``` ## Parameters `value` A relative front-to-back ordering for this view; the default is `0`. ## Discussion Use `zIndex(_:)` when you want to control the front-to-back ordering of views. In this example there are two overlapping rotated rectangles. The frontmost is represented by the larger index value. ``` VStack { Rectangle() .fill(Color.yellow) .frame(width: 100, height: 100, alignment: .center) .zIndex(1) // Top layer. Rectangle() .fill(Color.red) .frame(width: 100, height: 100, alignment: .center) .rotationEffect(.degrees(45)) // Here a zIndex of 0 is the default making // this the bottom layer. } ```  --- Copyright © 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)