---
title: "zIndex(_:)"
framework: swiftui
role: symbol
role_heading: Instance Method
path: "swiftui/view/zindex(_:)"
---

# zIndex(_:)

Controls the display order of overlapping views.

## Declaration

```swift
nonisolated func zIndex(_ value: Double) -> some View

```

## Parameters

- `value`: A relative front-to-back ordering for this view; the default is 0.

## Discussion

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

## See Also

### Layering views

- [Adding a background to your view](swiftui/adding-a-background-to-your-view.md)
- [ZStack](swiftui/zstack.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)