# Z-Index

As classes utilitárias de <span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-index</span> do **WPF** permitem controlar a ordem de empilhamento de elementos no eixo Z, definindo qual elemento aparece acima ou abaixo de outros. Elas são ideais para layouts com sobreposições, como modais, menus ou elementos posicionados com <span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">absolute</span> ou <span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">fixed</span>.

### Como Funcionam as Classes de Z-Index

As classes de <span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-index</span> seguem o padrão: **<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-(valor)</span>**, onde:

- **Valor**: Um número inteiro (positivo ou negativo) que define a ordem de empilhamento.
- **Sintaxe**: A classe é formada por *<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-</span>* seguido de um número, como `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-10</span>`, `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z--5</span>` ou `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-0</span>`.

#### Regras CSS Geradas

Cada classe é traduzida diretamente para a propriedade CSS <span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-index</span>. Por exemplo:

- `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-10</span>` → `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-index: 10;</span>`
- `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z--5</span>` → `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-index: -5;</span>`
- `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-0</span>` → `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-index: 0;</span>`

### Como Usar

As classes de **<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-index</span>** são aplicadas a elementos com <span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">position: `absolute`</span>, `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">relative</span>`, `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">fixed</span>` ou `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">sticky</span>`, já que o <span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-index</span> só afeta elementos posicionados. Use-as para controlar a sobreposição de elementos em layouts complexos.

#### Exemplo 1: Sobreposição Simples

Posicione um elemento acima de outro:

```html
<div class="relative w-100% h-200px">
  <div class="absolute top(0) left(0) bg(c-blue) z-10"><!-- Elemento superior --></div>
  <div class="absolute top(10px) left(10px) bg(c-red) z-5"><!-- Elemento inferior --></div>
</div>
```

#### Exemplo 2: Z-Index Negativo

Coloque um elemento abaixo do conteúdo padrão:

```html
<div class="relative w-100% h-200px">
  <div class="absolute top(0) left(0) bg(c-gray) z--1"><!-- Fundo --></div>
  <div class="absolute top(20px) left(20px) bg(c-white)"><!-- Conteúdo principal --></div>
</div>
```

### Notas

<p class="callout info">**Valores altos**: Use valores como `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-100</span>` ou superiores para elementos que devem ficar **acima de tudo**, como *modais*.</p>

<p class="callout info">**Valores negativos**: Use `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z--1</span>` ou **inferiores** para **elementos de fundo ou camadas abaixo do conteúdo principal**.</p>

<p class="callout warning">O **<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-index</span>** só funciona em elementos com <span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">position</span> diferente de `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">static</span>`.</p>

<p class="callout info">Valores maiores de **<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-index</span>** colocam o elemento mais acima na ordem de empilhamento.</p>

<p class="callout warning">Evite valores extremamente altos (ex.: `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">z-999999</span>`) para **manter a manutenção do código simples**.</p>