Guia completo sobre a propriedade position do CSS, um recurso utilizado para determinar o posicionamento dos elmentos HTML.
A propriedade position do CSS é um recurso que permite organizar os elementos HTML dentro de uma página. É esse recurso que possibilita, por exemplo, manter um menu ou um botão sempre visível em uma página, independentemente da posição da barra de rolagem.
O uso adequado dessa propriedade é essencial para deixar o site mais responsivo e ainda impacta diretamente na acessibilidade da aplicação. Por isso, se você tem um endereço eletrônico ou quer trabalhar criando layouts para sites, continue lendo este texto para entender o que é position do CSS e como utilizar esse recurso no dia a dia.
O que é a propriedade position do CSS?
Antes de explicar exatamente o que é essa propriedade, é bom relembrar que CSS é a sigla de Cascading Style Sheets (Folhas de Estilo em Cascata, em português). Trata-se de uma linguagem utilizada para definir como será a apresentação visual dos elementos escritos em HTML.
Já a propriedade position determina como os elementos serão posicionados na página e se eles poderão ser movidos para posições específicas, como direita, esquerda, topo ou fundo. Esse recurso possibilita que um site apresente elementos fixos, flutuantes, sobrepostos ou cujo formato e posição se alteram conforme o usuário navega na página.
Definição e função da propriedade
A propriedade position do CSS permite alterar o posicionamento padrão do elemento HTML, que é sempre estático, para outros valores. Isso é feito com o objetivo de organizar os componentes da página de acordo com o projeto de layout da aplicação.
Existem cinco valores que podem ser atribuídos a essa propriedade, são eles:
- Static (estático)
- Fixed (fixo)
- Relative (relativo)
- Absolute (absoluto)
- Sticky (colado)
Com exceção do valor static, todos os outros permitem um posicionamento personalizado do elemento, desde que ele se encaixe nas propriedades right, left, top e bottom (direita, esquerda, topo e inferior).
Por que a propriedade position é essencial no layout de páginas?
Essa propriedade é imprescindível para o layout das páginas porque ela possibilita controlar e organizar o posicionamento dos elementos HTML, criando, assim, layouts mais responsivos, funcionais e personalizados.
Como a propriedade position funciona
A propriedade position do CSS funciona determinando em que posição e ordem os componentes devem aparecer na página e também específica quais deles devem permanecer visíveis enquanto o usuário vai avançando na leitura.
Para aplicar esse recurso no seu site, basta acessar o código HTML da página e inserir nos espaços correspondentes aos elementos que você deseja ajustar o valor da propriedade position do CSS indicado para o efeito que você deseja aplicar no layout.
O fluxo normal de renderização dos elementos
O fluxo normal de renderização dos elementos no HTML determina que os componentes vão aparecer na página na mesma ordem em que aparecem no código. Esse padrão pode não ser o mais adequado para quem quer deixar a página mais atraente e responsiva.
Por isso, usar o recurso position do CSS é ideal para quem quer que o site fique mais personalizado e também para deixar determinados elementos sempre visíveis na página, como o menu e o botão de compras. Assim, é possível melhorar a experiência do usuário e, dependendo da finalidade do seu site, converter mais leads.
Diferença entre position e outras propriedades de layout
Se você tem ou já desenvolveu um site, provavelmente já sabe que existem outros recursos que podem ser utilizados para organizar o layout de uma página. Contudo, cada um deles deve ser usado em circunstâncias específicas. Veja abaixo quais são essas propriedades e saiba o que as diferencia da propriedade position do CSS:
- Display: determina como o componente será exibido, de acordo com as seguintes opções: bloco, inline, flexível ou em grade.
- Float: utilizado para deixar o elemento flutuando em relação ao componente pai.
- Flex: empregado para alinhar e organizar elementos dentro de um contêiner.
- Grid: trata-se de uma estrutura invisível que divide os espaços dentro de uma página.
Tipos de position no CSS
Agora que você já sabe o que é propriedade position e para que serve, confira o que são os valores disponíveis para essa propriedade e saiba quando usar cada um deles.
Static – valor padrão
A posição padrão de todos os elementos HTML é a static. Ela é utilizada quando não é necessário alterar o posicionamento do elemento, deixando que ele apareça na mesma ordem em que está inserido no código.
Os elementos com position: static não respondem às propriedades top, buttom, right e left. Portanto, caso você precise posicionar o componente HTML levando uma dessas variáveis em consideração, será necessário alterar o valor do elemento.
Relative – reposicionando em relação ao fluxo
Ao utilizar o valor relative, é possível reposicionar o componente utilizando os padrões top, button, left e right, sem que esse elemento perca o seu espaço original no layout da página. Essa propriedade é muito usada para organizar movimentos sutis, e que não vão impactar nos demais itens da página.
Além disso, o position: relative também pode ser utilizado para servir de referência no momento de posicionar um elemento absolute, já que esses componentes se baseiam em estruturas próximas com valores diferentes de static.
Absolute – posicionamento em relação ao elemento pai
Um elemento com a configuração position: absolute não faz parte do fluxo normal da página, por isso, ele não tem um espaço próprio no layout e todas as outras estruturas se comportam como se ele não existisse.
O componente com position: absolute é sempre posicionado em relação ao elemento pai mais próximo que não é position: static. Esse valor é muito empregado em itens que precisam aparecer sobre outros ou que devem estar em um lugar específico da tela, como menus suspensos, por exemplo.
Fixed – fixando elementos na tela
O valor fixed tem o objetivo de fixar um elemento em um ponto específico da página, permanecendo sempre da mesma forma, não sendo afetado pela barra de rolagem. Além disso, ele também faz com que o item seja completamente removido do fluxo da página.
O position: fixed é muito utilizado para posicionar estruturas como barras de navegação e cabeçalhos fixos.
Sticky – efeito híbrido entre relative e fixed
Esse valor combina os comportamentos do relative e do fixed. Isso significa que o elemento com o position: sticky segue o fluxo da página até um determinado ponto, quando passa a ser fixo.
O uso do fixed é muito comum quando é necessário deixar um componente visível por um determinado período, como um menu lateral, por exemplo.
Quando usar cada valor da propriedade position do CSS
Além de conhecer detalhadamente cada valor da propriedade position do CSS, vale a pena conferir quando usar cada um deles, para garantir um bom uso desse recurso:
- Relative: ideal para fazer pequenos ajustes visuais de elementos que seguem o fluxo da página.
- Absolute: muito indicado para elementos que devem ficar posicionados sobre um bloco de texto, como pop-ups.
- Sticky: recomendado para páginas longas nas quais é necessário fixar um elemento na tela temporariamente durante o scroll.
- Fixed: uma ótima opção para quando é preciso manter elementos fixos na tela, como um cabeçalho.
Exemplos práticos de uso da propriedade position
Se você ainda tem dúvidas sobre como aplicar a propriedade position do CSS, confira a seguir alguns exemplos de usos práticos dessa propriedade.
Criando um cabeçalho fixo (fixed header)
Um dos usos mais comuns da propriedade position do CSS é para criar um cabeçalho fixo na página. Esse recurso é muito utilizado por quem quer não que informações relevantes sobre o site ou recursos que podem auxiliar na navegação saiam do campo de visão do usuário.
Para criar essa estrutura, é preciso inserir a propriedade position: fixed ao elemento cabeçalho dentro do código HTML. Além disso, a fim de não permitir que o cabeçalho esconda parte do conteúdo da página, é necessário adicionar a propriedade padding-top ou margin-top ao elemento de conteúdo principal.
Botões flutuantes com absolute e relative
Outro exemplo prático do uso da propriedade position é para criar botões flutuantes em uma página, um recurso muito utilizado em landing pages. Para criar essa estrutura é necessário, primeiro, definir a posição do elemento pai usando o valor relative.
Em seguida, será preciso definir a posição do botão com o valor absolute e ajustar as coordenadas para deixá-lo no lugar desejado, como ilustra o exemplo a seguir:
.container {
position: relative;
}
.botao {}
position: absolute;
top: 60px;
left: 40px;Sticky em menus de navegação
Você também pode usar essa propriedade para criar menus de navegação que fiquem visíveis durante o scroll. Confira a seguir o passo a passo de como fazer isso:
- Crie o elemento menu dentro de um container ou de uma tag
<nav>. - Adicione a propriedade
position: sticky. - Defina
top: 0;para que o menu fique sempre no topo da página, independentemente da posição da barra de rolagem.
Boas práticas ao usar position do CSS
Para usar essa propriedade de forma adequada e impedir que o emprego dela deixe o seu site menos responsivo e acessível, descubra agora quais são as boas práticas de uso da propriedade position do CSS.
Evitando sobreposição indesejada de elementos
Quando essa propriedade é mal utilizada, ela pode causar a sobreposição de componentes HTML na página, o que pode impactar no layout, na experiência do usuário e também dificultar o funcionamento da navegação assistida.
Para evitar esse problema, é vital não usar dois tipos diferentes de propriedade position em um mesmo contêiner e sempre combinar esse recurso com media queries, um recurso do CSS que permite adaptar o posicionamento dos elementos de acordo com as características de cada dispositivo.
Outra maneira de evitar sobreposições indesejadas é usar essa propriedade juntamente com outras ferramentas de layout, como o Grid, que permitem maior controle na disposição dos componentes em uma página.
Usando z-index em conjunto com position
O z-index é um recurso usado para estabelecer a ordem em que os elementos HTML devem ser empilhados. Para isso, é atribuído um valor numérico a cada item, os componentes com valores menores ficam no fundo da pilha e o com valor maior será exibido acima de todos os outros.
Essa propriedade só pode ser aplicada em componentes que apresentem um valor diferente de position: static.
Quando preferir flexbox ou grid no lugar de position
Embora a propriedade position seja muito versátil, nem sempre ela é a melhor opção. Em alguns casos, como quando é preciso formatar layouts unidimensionais, em linhas ou colunas, o ideal é optar pelo flexbox, pois ele oferece recursos mais precisos para esse tipo de design.
O flexbox também costuma ser uma boa alternativa para quem deseja alinhar objetos, não importando para qual direção. Já o grid é ideal para as ocasiões em que é necessário trabalhar com componentes bidimensionais, para manipular blocos e também para construir a estrutura principal de um site.
Erros comuns ao aplicar position
Para que você possa usar esse recurso da melhor maneira possível, vale a pena conhecer alguns dos erros mais usuais ao aplicar a propriedade position e como evitá-los.
Esquecer contexto de posicionamento
É comum que ao elaborar um layout a pessoa esqueça de definir um elemento pai antes de usar o position: absolute. No entanto, isso pode impactar diretamente a estrutura da página, visto que os outros componentes vão se comportar como se esse item não existisse.
Misturar position com floats sem necessidade
Misturar position e floats desnecessariamente pode desestruturar o seu layout. Isso porque essas duas propriedades retiram o elemento do fluxo normal da página. Portanto, ao usá-las de maneira conjunta, elas podem dificultar significativamente a organização dos elementos.
Problemas de responsividade ao fixar elementos
Ao usar valores como absolute e fixed, o elemento HTML sai do fluxo normal da página. Isso faz com que ele não se adeque a diferentes tamanhos de tela, o que afeta diretamente na responsividade da aplicação. Para evitar que esse erro aconteça, use um media query dentro do bloco em que essa propriedade será aplicada.
Conclusão
Entender o que é a propriedade position do CSS e como ela interfere no layout do seu site é fundamental para quem deseja criar aplicações responsivas, originais e atraentes. Portanto, utilize as dicas apresentadas neste artigo na hora de organizar os elementos HTML da sua página.
Se você quiser conferir mais conteúdos acerca de layout de sites e também sobre design, continue no blog da HostGator e confira outros artigos sobre esses temas: