Ir para o conteúdo principal

Nova Página

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 <html>.
  • .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:

<div class="static">
    Este é um elemento com posicionamento estático.
</div>

<div class="sticky">
    Este é um elemento com posicionamento "sticky".
</div>

<div class="relative">
    Este é um elemento com posicionamento relativo.
</div>

<div class="absolute">
    Este é um elemento com posicionamento absoluto.
</div>

<div class="fixed">
    Este é um elemento com posicionamento fixo.
</div>

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().

Voltar ao topo