No CSS, o CSS position é uma propriedade utilizada para determinar o posicionamento dos elementos na página. Ela é usada em conjunto com propriedades auxiliares, entre elas: bottom, top, left e right, que ajudam a definir de que forma o elemento será posicionado na tela.
É importante entender como o CSS position funciona, pois essa propriedade pode sobrepor elementos, além de ser utilizada para aplicar efeitos interessantes, como a fixação do cabeçalho ao rolar a página. Para demonstrar como usar esse recurso, preparamos este post com os seguintes tópicos:
- O que é a propriedade position?
- Qual é a sua sintaxe?
- Quais os valores da propriedade position?
- Quais são as propriedades do elemento position?
- Exemplo de uso da propriedade position
- Qual é a compatibilidade com os navegadores?
Continue com a gente e boa leitura!
O que é a propriedade position?
Como mencionamos, a propriedade position define a posição de um elemento na página HTML. Por padrão, seu valor é sempre definido como static, ou seja, acompanha o fluxo normal do posicionamento na página. Portanto, se nada for especificado, ele será posicionado conforme a ordem natural dos elementos usados na página.
Qual é a sua sintaxe?
A sintaxe da propriedade position é:
position: static | relative | fixed | absolute | sticky
Exceto quando seu valor é definido como static, a propriedade position deve ser utilizada em conjunto com outras propriedades auxiliares. Como elas são necessárias para indicar o posicionamento do elemento, falaremos mais sobre elas nos próximos tópicos.
Quais os valores da propriedade position?
A propriedade position pode ter diferentes valores, que afetam o comportamento do elemento na página. Confira quais valores ela pode assumir.
Mantendo a posição padrão do elemento: position: static
O valor da propriedade CSS position static determina que o elemento utilizará o posicionamento padrão, ou seja, atribuirá o comportamento natural na página. É importante dizer que, ao utilizar a condição position: static, as propriedades top, bottom, left e right atribuídas ao elemento são ignoradas pelo navegador.
position: static;
Alterando a posição do elemento em relação à sua posição normal: position: relative
A propriedade CSS position relative determina que o elemento será posicionado de acordo com o fluxo natural da página. Entretanto, ao utilizá-lo em conjunto com as propriedades auxiliares, o posicionamento será ajustado de acordo com as indicações. Por exemplo, se definirmos left: 20px, o elemento será afastado 20 pixels à esquerda a partir de seu ponto de origem.
position: relative;
left: 20px;
Fixando a posição de elementos em uma janela de visualização: position: fixed
O valor da propriedade CSS position fixed indica que o elemento terá um valor fixo em relação ao viewport, ou seja, à área visível da tela.
position: fixed;
top:0;
Posicionando um elemento em relação ao elemento pai: position: absolute
O valor da propriedade CSS position absolute indica que o elemento ficará em uma posição fixa em relação à página.
position: absolute;
bottom:0;
A posição do elemento é relativa até que ultrapasse os limites do bloco: sticky
A propriedade position sticky CSS tem o comportamento variado. No primeiro momento, ela funciona com a posição relativa até atingir determinado limite, que pode ser a altura da tela ou o tamanho de um container, caso ele esteja inserido em uma
Ao fazer a rolagem da página e atingir o limite do bloco, o elemento definido como sticky terá o comportamento como fixed e respeitará os valores definidos pelas propriedades auxiliares para indicar a posição. Essa propriedade é utilizada, por exemplo, para manter o header fixo no topo ao rolar a página.
position: sticky;
top: 0;
Redefinindo a propriedade para o valor padrão: initial
Definir o valor de position para initial é o mesmo que dizer ao navegador para utilizar o valor padrão definido para aquele elemento, que é o posicionamento static.
position: initial;
Herdando a propriedade de seu elemento pai: inherit
Para herdar as características de posicionamento do elemento pai, basta definir o valor de position igual a inherit.
position: inherit;
Quais são as propriedades do elemento position?
Existem outras propriedades que ajudam a posicionar o elemento na posição e ordem desejada. Confira como elas funcionam.
Bottom
Posiciona o elemento conforme a distância indicada e utiliza a área inferior da tela como ponto de início.
Top
Posiciona o elemento a partir do topo da página.
Left
Posiciona o elemento a partir do lado esquerdo da página.
Right
Determina a posição do elemento a partir do lado direito da página.
Clip
Define a área em que o conteúdo de um elemento será visualizado. Essa propriedade só pode ser usada em conjunto com o posicionamento absolute ou fixed.
.elemento{
position: absolute;
clip: rect(0px,100px,200px,0px);
}
Overflow
É utilizada para indicar qual ação o navegador deve tomar quando o tamanho do elemento exceder o limite determinado. Os valores possíveis são:
- scroll: para adicionar barras de rolagens na vertical e horizontal, mesmo que uma delas fique desabilitada;
- hidden: para esconder o conteúdo em excesso;
- auto: adiciona barras de rolagem de acordo com a necessidade, ou seja, se o excesso de conteúdo for na direção horizontal, apenas essa barra será adicionada;
- visible: valor padrão para a propriedade e exibe o conteúdo fora dos limites do elemento.
Z-index
A propriedade z-index é utilizada para ordenar os elementos na página, especialmente quando eles se sobrepõem. Na prática, funciona como um indicador de camadas, no qual o valor maior corresponde à posição superior.
É importante dizer que o z-index só funciona em conjunto com as propriedades absolute, relative ou sticky.
.elemento {
position: absolute;
top: 0px;
z-index: -1;
}
Exemplo de uso da propriedade position
No código de exemplo abaixo, definimos as duas primeiras divs verdes com a propriedade position igual static para demonstrar como os elementos se dispõem naturalmente na tela. Perceba que declaramos dois elementos com a cor lilás e com a position igual a fixed, e os posicionamos do lado direito da página. Por serem fixos, eles permanecem nessa posição mesmo se rolarmos a tela.
Veja que definimos um elemento de cor laranja e indicamos que ele tem o posicionamento como sticky. Perceba que, ao rolar a tela, ele ficará fixo na posição indicada. Observe, também, que o elemento de cor vermelha passa por trás do elemento sticky. Isso acontece porque definimos seu z-index como “-1”. Caso contrário, ele passaria por cima da
Por fim, definimos um elemento de cor azul e atribuímos a propriedade position igual a absolute, com distâncias a partir do topo e da parte esquerda da tela. Perceba que ele permanece nessa posição mesmo se rolarmos a página. Confira o código a seguir.
CSS - Position
Posicionamento padrão: static