Skip to main content
.zIndex(order: number): Component
​
order
number
required
The stacking priority. Higher values render on top of lower values. The default is 0.

​
Support

​
Usage

​
Bring a component to front

ZStack([
    Circle()
        .frame({ width: 100, height: 100 })
        .foregroundStyle(Color("blue")),
    Circle()
        .frame({ width: 100, height: 100 })
        .foregroundStyle(Color("red"))
        .offset({ x: 30, y: 30 })
        .zIndex(1),
])

​
Layered cards

ZStack([
    RoundedRectangle(12)
        .frame({ width: 200, height: 120 })
        .foregroundStyle(Color("gray"))
        .offset({ y: -10 })
        .zIndex(0),
    RoundedRectangle(12)
        .frame({ width: 220, height: 130 })
        .foregroundStyle(Color("blue"))
        .zIndex(1),
    RoundedRectangle(12)
        .frame({ width: 200, height: 120 })
        .foregroundStyle(Color("gray"))
        .offset({ y: 10 })
        .zIndex(0),
])

​
Dynamic z-ordering

const body = () => {
    const [selected, setSelected] = useState(0)
    return ZStack(
        items.map((item, index) =>
            Text(item.name)
                .padding(16)
                .background(Color(item.color))
                .cornerRadius(8)
                .offset({ x: index * 20, y: index * 20 })
                .zIndex(index === selected ? 10 : 0)
                .onTapGesture(() => setSelected(index))
        )
    )
}

​
Notes

  • .zIndex() only affects rendering order within the same parent container.
  • Without .zIndex(), components in a ZStack render in order: first child at the bottom, last child on top.
  • Negative values are valid and place the component behind siblings with the default zIndex(0).