# Position

O atributo **position** é retratado de uma maneira bem natural e intuitiva pelo WPF. Para atribuir classes utilitárias de posição no seu código, basta escrever o nome do valor do atributo diretamente como uma classe css:

```html
<div class="relative">
  <!-- O conteúdo dessa classe recebeu o atributo css 'position: relative' -->
</div>

<div class="absolute">
  <!-- O conteúdo dessa classe recebeu o atributo css 'position: absolute' -->
</div>

<div class="sticky">
  <!-- O conteúdo dessa classe recebeu o atributo css 'position: sticky' -->
</div>

<!-- Isso funciona para qualquer outro tipo de atribuição de posicionamento. -->
```

Abaixo segue uma lista com todas as posições suportadas pelo framework:

<table border="1" id="bkmrk-classe-utilit%C3%A1ria-co" style="border-collapse: collapse; width: 100%; height: 213.938px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><thead><tr style="height: 29.7969px;"><td class="align-center" style="height: 29.7969px;">Classe Utilitária</td><td class="align-center" style="height: 29.7969px;">Comportamento</td></tr></thead><tbody><tr style="height: 30.1094px;"><td class="align-center" style="height: 30.1094px;">`static`</td><td class="align-center" style="height: 30.1094px;">*Posicionamento padrão, segue o fluxo normal do documento.*

</td></tr><tr style="height: 46.9062px;"><td class="align-center" style="height: 46.9062px;">`sticky`</td><td class="align-center" style="height: 46.9062px;">*Alterna entre* `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">relative</span>` *e* `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">fixed</span>`*, fixando o elemento ao atingir um ponto de rolagem definido.*

</td></tr><tr style="height: 46.9062px;"><td class="align-center" style="height: 46.9062px;">`relative`</td><td class="align-center" style="height: 46.9062px;">*Posicionado relativo à sua posição original.   
Permite ajustes com* `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">top</span>`, `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">right</span>`, `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">bottom</span>` e `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">left</span>`.

</td></tr><tr style="height: 30.1094px;"><td class="align-center" style="height: 30.1094px;">`absolute`</td><td class="align-center" style="height: 30.1094px;">*Posicionado em relação ao ancestral mais próximo com posição não* `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">static</span>`*, sai do fluxo normal.*</td></tr><tr style="height: 30.1094px;"><td class="align-center" style="height: 30.1094px;">`fixed`</td><td class="align-center" style="height: 30.1094px;">*Posicionado em relação à janela do navegador, permanece fixo durante a rolagem.*

</td></tr></tbody></table>