O CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para controlar a apresentação e o Layout de elementos HTML em uma página web. O posicionamento é uma parte importante do CSS, pois determina como os elementos são dispostos na página em relação a outros elementos e ao próprio fluxo do documento.
Para a propriedade position, podemos atribuir 5 valores, que são: static, fixed, sticky, relative, absolute.
Vamos entender como funciona cada uma delas:
Position Static (Estático):
É um comportamento padrão do HTML, onde os elementos são posicionados em ordem, de cima para baixo e da esquerda para a direita.
Elementos em fluxo normal não aceitam propriedades CSS especiais para o seu posicionamento.
Position Fixed (Fixo):
O posicionamento fixo, faz com que o elemento que recebeu esta propriedade não se mova na tela. Mesmo que a página possua rolamento (scroll), tanto rolando para a esquerda e direita, quanto para cima e para baixo. Um exemplo seria usar uma barra de navegação lateral onde a mesma ficaria fixa, a navegação fica sempre visível durante o uso da página.
Exemplo:
.teste {
position: fixed;
height: 1000px;
}
Position Sticky (Colado/pegajoso):
Este posicionamento precisa de um posicionamento de referência, por tanto é sempre em conjunto das propriedades auxiliares. Parecido com o fixed, mas sua diferença, é que em vez de ficar fixo em relação a tela, fica fixo em relação a rolagem da página.
Exemplo:
.teste {
position: sticky;
top: 0px;
}
Position Relative (Relativo):
O posicionamento relativo serve para posicionar o elemento da página de acordo com as indicações que você definir.
A posição é definida através de quatro outras propriedades: top, bottom, left, right, que indicam a distância com relação ao topo, base, esquerda e direita, respectivamente, tomando como referência o posicionamento do elemento pai.
Exemplo:
.teste {
position: relative;
left: 150px;
}
Position Absolute (Absoluto):
A posição será definida em relação ao próximo elemento pai que esteja posicionado relativamente ou absolutamente.
Se não houver um elemento pai definido, por padrão ele irá definir o próprio documento HTML como sua raiz, significa que a posição será definida em relação à própria página web.
Exemplo:
.teste {
position: absolute;
top: 50px;
left: 50px;
}
A diferença entre o position relative e o position absolute é basicamente qual elemento será usado como referência para realizar o posicionamento. O relative leva em consideração sua própria posição ao se deslocar. E o absolute leva em consideração a posição do elemento pai que possua um position relative, ou então será relativo ao próprio navegador.
Em resumo, o posicionamento CSS é uma ferramenta poderosa para controlar o layout e o design de páginas da web. É essencial entender as propriedades de posicionamento e usá-las de forma adequada para criar layouts desejados e funcionais. Além disso, ao projetar para a web, é importante levar em consideração a responsividade e a adaptabilidade a diferentes dispositivos e tamanhos de tela.
