Contents

zIndex(_:)

Controls the display order of overlapping views.

Declaration

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.
}

[Image]

See Also

Layering views