# Posicionamento
Essas classes oferecem diferentes opções de posicionamento para elementos HTML. Elas são úteis ao precisar controlar a posição de um elemento em relação ao seu contêiner ou à janela do navegador.
### **Classes Disponíveis**
- `.static`: Define o posicionamento do elemento como estático, ou seja, ele segue o fluxo normal do documento e não é afetado por outros elementos.
- `.sticky`: Define o posicionamento do elemento como "sticky", o que significa que ele se comporta como "relative" até que atinja um determinado ponto de rolagem. Após atingir esse ponto, ele se torna "fixed", mantendo-se fixo na tela.
- `.relative`: Define o posicionamento do elemento como relativo ao seu posicionamento normal. Isso permite que você mova o elemento usando as propriedades **`top`**, **`right`**, **`bottom`** e **`left`**.
- `.absolute`: Define o posicionamento do elemento como absoluto em relação ao seu ancestral mais próximo que possui uma posição diferente de `static`. Se nenhum ancestral for encontrado, o elemento será posicionado em relação ao elemento ``.
- `.fixed`: Define o posicionamento do elemento como fixo em relação à janela do navegador. Ele permanecerá na mesma posição, independentemente da rolagem da página.
### **Uso**
Para aplicar esses estilos de posicionamento a um elemento HTML, basta adicionar a classe correspondente conforme necessário. Por exemplo:
```html
Este é um elemento com posicionamento estático.
Este é um elemento com posicionamento "sticky".
Este é um elemento com posicionamento relativo.
Este é um elemento com posicionamento absoluto.
Este é um elemento com posicionamento fixo.
```
Cada classe de posicionamento alterará o comportamento do elemento conforme descrito acima, permitindo um controle preciso sobre o layout e a aparência da página.
# Configurando posicionamento por funções
Há casos onde será necessário instruir o elemento a se comportar de uma maneira ainda mais específica e, portanto, o WPF oferece algumas funções que auxiliam o usuário a configurar o posicionamento do seu elemento de forma específica diretamente no seu arquivo SCSS/SASS:
Confira elas aqui:
[setPosition()](https://www.notion.so/setPosition-1341d6473c9981b181bbe9db1a77081f?pvs=21)
[centerPosition()](https://www.notion.so/centerPosition-1341d6473c9981ed984acc6c75d5b8ce?pvs=21)
Esses mixins oferecem maneiras simples e flexíveis de configurar o posicionamento de elementos em seus projetos, permitindo uma maior personalização e controle sobre o layout.
Além dos mixins, você também pode optar por usar uma versão dessas funções *em classe.* Juntamente com as classes auxiliares que definem um posicionamento. Se elas forem `absolute`, `relative` ou `fixed` , é possível utilizar as funções `top()`, `right()`, `bottom()` e `left()`, com valores em **%, px, dvh** ou **dvw** para setar valores **diretamente no atributo class** do seu componente HTML. É possível até mesmo utilizar o mixin [centerPosition()](https://www.notion.so/centerPosition-1341d6473c9981ed984acc6c75d5b8ce?pvs=21) via classe com a função `center()`.