ZStack

'use client';
import { VStack, Text } from '@swiftuijs/ui';
import { ZStack } from '@swiftuijs/ui';
export default function Example() {
    return ((<ZStack style={{ width: '200px', height: '200px', backgroundColor: '#f0f0f0' }}>
      <Text style={{ color: 'lightblue' }}>Background Layer</Text>
      <VStack>
        <Text>Foreground Layer</Text>
      </VStack>
    </ZStack>));
}

Alignment

Control how children are aligned within the ZStack:

Image Overlay

Common use case: overlay text on images:

Multiple Layers

ZStack can contain multiple layers:

Usage and limitations

• First child is the bottom layer; later children appear above it. Alignment positions the layers as a group.
• Content can determine size; set dimensions explicitly for predictable overlays/backgrounds.
• Avoid excessive nesting and ensure overlays do not obscure important content or controls.