A
posição propriedade em CSS especifica o tipo de método de posicionamento usado para um elemento (estático, relativo, absoluto, fixo ou fixo). Aqui estão os diferentes valores para a propriedade position e seus casos de uso:
1. estático (padrão) - Os elementos são posicionados de acordo com o fluxo normal do documento.
- É o valor inicial e não afeta o posicionamento do elemento.
- Elementos posicionados estáticos não são afetados pela propriedade position de seus elementos pais.
2. relativo - Os elementos são posicionados em relação à sua posição normal.
- A posição do elemento é deslocada pelos deslocamentos especificados sem afetar o layout ou a posição de outros elementos.
- Os deslocamentos são especificados usando as propriedades superior, direita, inferior e esquerda.
- O posicionamento relativo é comumente usado para pequenos ajustes de reposicionamento.
3. absoluto - Os elementos são posicionados absolutamente dentro do elemento que os contém ou no ancestral posicionado mais próximo.
- A posição do elemento é completamente removida do fluxo normal do documento.
- O posicionamento absoluto é normalmente usado para elementos que precisam de posicionamento e camadas precisos, por exemplo, pop-ups, dicas de ferramentas ou elementos de sobreposição.
4. corrigido - Os elementos são posicionados e fixos em relação à janela de visualização, mantendo sua posição mesmo enquanto o usuário rola a página.
- O posicionamento fixo é útil para criar elementos que permanecem visíveis e acessíveis independentemente da posição de rolagem do usuário, por exemplo, barras de navegação, barras laterais ou anúncios flutuantes.
5. pegajoso - O posicionamento fixo combina aspectos de posicionamento relativo e fixo.
- Os elementos se comportam como elementos relativamente posicionados até atingirem um ponto de rolagem especificado. Nesse ponto, eles se tornam fixos e permanecem bloqueados na janela de visualização até que a posição de rolagem seja alterada.
- O posicionamento fixo é comumente usado para cabeçalhos ou rodapés que permanecem visíveis enquanto o usuário rola a página, criando uma experiência de navegação fixa.
A escolha do método de posicionamento apropriado depende do comportamento desejado e do layout do elemento na página web.
