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:
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()
centerPosition()
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() via classe com a função center() .