Position CSS: Estilos de Posição Para O Seu Layout

Delimitando o local dos elementos do seu site

A position CSS é um recurso usado para ordenar os elementos HTML de uma página web, como sites, redes sociais e blogs. Você já deve ter notado, por exemplo, que o Facebook possui a barra superior fica no topo da página independente da barra de rolagem, isso acontece devido a esse “comando”.

Neste artigo, você vai entender:

 

  • o que é a propriedade position CSS;
  • como manter a posição de um elemento com a position CSS;
  • a compatibilidade com os navegadores

 

O que é a propriedade position

Position CSS é uma propriedade usada para determinar a posição dos elementos em uma página da internet. Ela é usada com propriedades que direcionam onde um texto, figura ou botões ficarão no layout de um site

Ou seja, quando se quer distribuir elementos de uma página de maneira organizada, com ou sem efeitos especiais, a propriedade CSS position é o que deve ser usada (em conjunto a outras propriedades que falaremos a seguir).

As propriedades usadas em conjunto à position são:

  • bottom: posiciona o elemento da página na área inferior da tela ;
  • top: posiciona o elemento no topo da página.
  • left: posiciona o elemento no lado esquerdo da página.
  • right: posiciona o elemento no lado direito da página.
  • clip: estabelece onde o conteúdo será visualizado. Pode ser usada junto ao posicionamento absolute ou fixe (que falaremos a seguir).

O elemento overflow

Esse é um valor que indica o que o navegador web deve fazer quando o tamanho de uma imagem, por exemplo, for maior do que o limite ideal. Essas ações podem ser:

  • scroll: inclui barras de rolagem vertical e horizontalmente na página;
  • hidden: esconder parte do elemento que excede o limite ideal;
  • auto: serve para que o navegador inclua barras de rolagem seguindo a necessidade. Se o conteúdo excede verticalmente, por exemplo, a barra será incluída apenas na vertical;
  • visible: serve para o conteúdo fora do limite ser exibido.

A propriedade Z-index

Essa é uma propriedade position CSS usada para que os itens da página sejam ordenados em caso de sobreposição. Ou seja, serve como uma “ordem de camada” onde o elemento de maior maior fica na posição superior. 

Position CSS

Como manter a posição de um elemento com a position CSS

Veja só quais valores da position CSS você pode utilizar para determinar a condição do elemento de acordo com o navegador usado. São eles: static relative, fixed, sticky, absolute, initial e inherit. 

Relative

A position relative serve para posicionar o elemento da página de acordo com as indicações que você definir, estabelecendo que ele aceita as propriedades top, bottom, left e right.

Essa propriedade não determina o ponto central do elemento, mas sim que o ponto base (ou seja, o ponto de partida da posição de uma imagem, por exemplo), seja o canto superior esquerdo dele mesmo. A partir daí, o navegador calcula as indicações, coordenadas, definidas por você. 

Static

Valor de um elemento HTML que deve seguir o fluxo comum da página. É indicado para remover um posicionamento definido anteriormente.

Absolute

Essa propriedade position CSS é usada para que o elemento da página parta do ponto superior esquerdo a outros elementos. Ou seja, ela determina o elemento “pai” e os elementos “parentes”.

Sticky

Essa propriedade position CSS indica que o local do elemento será relativa até que, e se, ultrapasse os limites do blog da página. Por isso, ela determina a posição de uma imagem, por exemplo, até que essa atinja  certo limite (que pode ser a altura da tela).

É usada, por exemplo, para manter um header fixado no topo quando a página é rolada. 

Initial

A initial serve para dizer ao navegador usar o padrão definido para um elemento específico. 

Inherit

Da mesma forma que o absolute determina o elemento “pai”, o inherit indica quais elementos devem herdar a posição do elemento “pai”.

Fixed

Parecido com a propriedade absolute, a fixed determina que elemento HTML não faça parte do fluxo comum da página. No entanto, sua posição vai ser independente do uso da barra. Em questões de usabilidade, no entanto, não é muito indicado para dispositivos menores como tablets ou smartphones, porque parte da barra de rolagem pode ficar cortada. 

Verificando a compatibilidade com os navegadores

A position CSS funciona bem em todos os navegadores(browsers). Mas antes de utilizar esse recurso, é importante ter certeza disso. Afinal, se uma funcionalidade não for compatível, pode resultar em falhas e prejudicar a usabilidade do site. 

A propriedade position CSS está disponível para navegadores a partir das versões abaixo:

  • Android Browser: 81;
  • Chrome: 4;
  • Chrome for Android: 88;
  • Edge: 12;
  • Firefox for Android: 85;
  • Firefox: 2;
  • Internet Explorer: 6;
  • iOS Safari: 3.2;
  • Safari: 3.1;
  • Samsung Internet: 4;
  • Safari: 3.1;
  • Opera: 10;
  • Opera Mobile: 59;

Então, gostou de aprender sobre a positon CSS? Então continue ampliando seus conhecimentos sobre o assunto lendo o artigo Border CSS: Estilos de Borda Para Usar No Seu Site aqui no blog da GoDaddy!

Imagem de: pexels.com

Jornalista apaixonada por literatura, música e cinema. É Analista de Conteúdo na Agência Mestre e, antes disso, foi produtora editorial, assessora de imprensa e teve vários blogs ao longo do caminho. A escrita é sua paixão e acredita que a comunicação pode mover barreiras.