Você sabe como usar o position CSS? Ele é 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 mantém a barra superior no topo da página mesmo se o usuário descer o cursor do mouse para navegar pelo feed.
Isso acontece justamente devido ao comando ”CSS position relative” e seus recursos para tornar a navegação mais atraente e a interface das páginas mais dinâmicas e funcionais.
Mas, afinal, o que é CSS? Essa sigla significa “Cascading Style Sheets” e representa a linguagem de estilo mais popular e utilizada para configuração de sites e apps.
Ela é usada geralmente de forma complementar a um documento HTML, que é uma linguagem de marcação. O desenvolvedor web define as cores, fontes e posição dos elementos de uma página no site por meio do CSS.
Além disso, essa linguagem também permite a configuração de transições animadas e de outros efeitos para deixar o layout mais dinâmico.
Neste artigo, vamos te explicar o que é e como usar Position CSS, que é justamente um desses recursos dessa linguagem de programação de sites. Confira!
O que é position CSS?
Afinal, o que é position CSS? Ele é 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 absoluto ou fixe (que falaremos a seguir).
Antes de entender melhor como usar o position CSS, entenda algumas de suas propriedades mais famosas, como o elemento overflow e o Z-index.
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 essencial para quem quer aprender como usar o position CSS. Ela faz com que os itens da página sejam reordenados em caso de sobreposição.
Ou seja, serve como uma “ordem de camada” onde o elemento de maior maior fica na posição superior.
Como usar o position CSS?
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 vamos aprender como utilizar o position CSS para determinar a condição do elemento de acordo com o navegador usado? Existem funções específicas para reorganizar esses elementos automaticamentes, como:
- static relative;
- fixed;
- sticky;
- absolute;
- initial;
- inherit.
Vamos falar brevemente sobre cada uma delas!
Relative
O CSS 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.
Então, gostou de aprender como usar o position CSS? O fato é que, apesar de simples, mexer com linguagem de programação não é o forte da maioria das pessoas, principalmente empreendedores sem conhecimento técnico e que desejam ativar o site da marca.
Para eles, existe o Criador de Sites da GoDaddy. Essa ferramenta oferece recursos extremamente simples de arrastar e soltar para montar as páginas do seu cantinho na internet sem dificuldade.
Além disso, ele também oferece uma ampla biblioteca de templates já prontos, fontes tipográficas, cores e de imagens para você personalizar o site com a cara da sua marca!
Comece gratuitamente agora mesmo
