Ir para o conteúdo principal

Z-Index

As classes utilitárias de z-index 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 absolute ou fixed.

Como Funcionam as Classes de Z-Index

As classes de z-index seguem o padrão: z-(valor), onde:

  • Valor: Um número inteiro (positivo ou negativo) que define a ordem de empilhamento.

  • Sintaxe: A classe é formada por z- seguido de um número, como z-10, z--5 ou z-0.

Regras CSS Geradas

Cada classe é traduzida diretamente para a propriedade CSS z-index. Por exemplo:

  • z-10 → z-index: 10;

  • z--5 → z-index: -5;

  • z-0 → z-index: 0;

Como Usar

As classes de z-index são aplicadas a elementos com position: absolute, relative, fixed ou sticky, já que o z-index 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:

<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:

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

Dicas

  • Notas

    Valores altos: Use valores como z-100 ou superiores para elementos que devem ficar acima de tudo, como modais.

  • Valores negativos: Use z--1 ou inferiores para elementos de fundo ou camadas abaixo do conteúdo principal.

Notas

  • O z-index só funciona em elementos com position diferente de static.

  • Valores maiores de z-index colocam o elemento mais acima na ordem de empilhamento.

  • Evite valores extremamente altos (ex.: z-999999) para manter a manutenção do código simples.

Voltar ao topo