Posicionamento CSS

Saber posicionar os elementos nas páginas da web é essencial para apresentar as informações ao usuário com precisão. Ao realizar um posicionamento eficaz, a interface do site ficará facilmente acessível, pois a página terá apenas os recursos necessários para o seu funcionamento, fazendo com que o conteúdo seja exibido de forma rápida, agradável e intuitiva.

É por isso que este artigo explica o que é o Posicionamento CSS e como usá-lo em páginas da web.

O que é o Posicionamento CSS?

Ao criar uma página da web, os elementos HTML são posicionados por padrão em um fluxo natural, também chamado de posicionamento estático, onde é considerado apenas se o elemento é um elemento de linha para posicioná-lo no espaço necessário ou se o elemento é um elemento de bloco para que preencha toda a largura da página.

Então, como você posiciona os elementos de uma maneira diferente do padrão do navegador? Para poder mover à vontade os elementos da nossa página web utilizamos o posicionamento clássico, que consiste em utilizar a propriedade position no nosso CSS. Isso permite que você use qualquer um dos seguintes valores: static, relative, absolute, fixed ou sticky para colocar nosso elemento na posição que queremos. De referir que o valor static é a posição que nosso documento usa por padrão.

Assim que for utilizado qualquer um dos valores oferecidos pela propriedade, position ou static, as seguintes propriedades estão habilitadas: top, bottom, left, right, que permitirão o movimento no eixo X ou Y, respectivamente.

A seguir, explicamos em que consiste cada um dos valores que a propriedade position possui e a maneira como eles podem ser usados ​​em páginas da web.

Passo a passo

Relative

O posicionamento relative permite mover o elemento da página da web no eixo X com as propriedades left e right ou movê-lo no eixo Y com outras propriedades: bottom e top.

Vale ressaltar que o valor relative não leva em consideração a posição do container para mover o elemento, mas sim considera a posição do elemento como tal. Da mesma forma, o elemento sempre mantém suas dimensões; isso significa que os demais elementos sempre consideram a existência do elemento em sua posição original.

Aqui está um exemplo. Antes de usar a propriedade position, a renderização dos elementos fica assim:

See the Pen Sin posicionamiento Relative by Mary Diaz (@Mary-Diaz-the-bold) on CodePen.

Após a utilização da propriedade position, as propriedades top, bottom, left e right são habilitadas, permitindo que o elemento seja colocado na posição desejada. Conforme observado, não há necessidade de adicionar uma posição ao contêiner.

See the Pen Position Relative by Mary Diaz (@Mary-Diaz-the-bold) on CodePen.

Absolute

O posicionamento absolute permite mover o elemento no eixo X ou Y, mas ao contrário do relative, toma a posição do contêiner como referência para movê-lo. Isso significa que o container deve ter um posicionamento definido (que geralmente é relativo) para que seja tomado como referência.

Nesse tipo de posicionamento, o elemento perde suas dimensões em sua posição original, ou seja, os demais elementos consideram que o elemento não existe e ocupam seu espaço. Quanto ao seu ponto de referência, encontra-se o ancestral contendor mais próximo com posicionamento relative, caso contrário, utiliza a referência do body.

Um exemplo do mencionado acima é mostrado abaixo:

See the Pen Sin posicionamiento absolute by Mary Diaz (@Mary-Diaz-the-bold) on CodePen.

Como pode ser visto, os elementos estão localizados de acordo com o fluxo natural esperado.

Utilizando a posição absolute e tendo o container com posição relative, o elemento é posicionado da seguinte forma:

See the Pen Posicionamiento absolute by Mary Diaz (@Mary-Diaz-the-bold) on CodePen.

Como pode ser visto, a referência que se toma para mover o elemento é o container e os demais elementos sempre mantêm sua posição, pois consideram que o elemento não existe.

Fixed

O posicionamento fixed toma o viewport como referência para o deslocamento do elemento e assim o localiza de forma fixa e imóvel. É utilizado para que o elemento mantenha sua posição fixa, independentemente de o usuário rolar a página para cima ou para baixo.

Um exemplo do uso da posição fixa são os menus nas páginas da web. Eles permanecem fixos, apesar do movimento que o usuário faz na página.

See the Pen Posicionamiento fixed by Mary Diaz (@Mary-Diaz-the-bold) on CodePen.

Sticky

O posicionamento sticky é semelhante ao comportamento do posicionamento relative e fixed. Inicialmente, é relativo até que o elemento atinja um determinado valor e se comporte como fixo. Neste caso, as propriedades top, bottom, left e right são utilizadas para definir quando o elemento deve se comportar como fixed.

É importante entender que o elemento com a propriedade sticky vai depender do elemento recipiente para ficar enquanto o usuário rola. Se o container não tiver uma certa altura, a propriedade sticky não terá efeito.

Aqui está um exemplo de posicionamento sticky:

See the Pen Posicionamiento Sticky by Mary Diaz (@Mary-Diaz-the-bold) on CodePen.

Bom! Agora você sabe como posicionar os elementos conforme desejado em seu documento. Lembre-se de que existem outras maneiras de classificar que você pode explorar para obter uma compreensão completa das formas de otimizar seu site.

Nos próximos artigos, abordarei o posicionamento com Flexbox e Grid.

Todo sucesso!