Descubra a versatilidade da propriedade position

Se você já trabalhou com desenvolvimento de sites ou páginas da web. Dessa forma, já ouviu falar do CSS e de como ele é importante para controlar a aparência e o layout do seu conteúdo.

E uma das propriedades mais fundamentais do CSS é a “position” (posição, em português). Então permite que você controle a posição de um elemento na página. Se você quer entender melhor como funciona a propriedade “position” do CSS e como usá-la para criar layouts mais sofisticados e dinâmicos, continue lendo este texto.

Os diferentes valores da propriedade “position”

A propriedade “position” do CSS tem quatro valores principais: “static”, “relative”, “absolute” e “fixed”. O valor “static” é o valor padrão e define a posição do elemento como estática. Ja o “relative” permite que você posicione um elemento em relação à sua posição normal.

O valor “absolute” posiciona o elemento em relação ao elemento pai mais próximo que tem uma posição definida. E o valor “fixed” posiciona o elemento em relação à janela do navegador.

Por exemplo, se você definir a propriedade “position” como “absolute” em um elemento e especificar “top: 50px; left: 100px;”, o elemento posiciona-se 50 pixels abaixo do elemento pai mais próximo que tem uma posição definida e 100 pixels à esquerda desse elemento pai.

Veja também:

Estrutura Básica Do HTML
Introdução rápida sobre Python
Introdução rápida sobre JavaScript
Passo a passo de como funciona a internet
JavaScript: acelere seu site Usando a Tag script

Como funciona o valor “static”

O valor “static” é o valor padrão da propriedade “position” do CSS. Quando você define o valor “static” para um elemento, ele posiciona-se de acordo com o fluxo normal do documento, sem nenhum deslocamento específico. Isso significa que o elemento segue a ordem natural do HTML e exibe-se na página de acordo com a ordem em que aparece no código.

Em outras palavras, o valor “static” não permite que você mova o elemento de sua posição original usando as propriedades “top”, “bottom”, “left” ou “right”. Portanto, não é necessário especificar a propriedade “position” como “static”, já que esse valor é o padrão e usa-se automaticamente se nenhum valor for definido.

Veja um exemplo simples abaixo para ilustrar:

<div style="background-color: yellow; width: 100px; height: 100px;">

  Este é um exemplo de elemento com position: static

</div>

Nesse exemplo, o elemento é um retângulo amarelo de 100×100 pixels que exibe-se no fluxo normal do documento. Não há deslocamento específico definido para esse elemento, então ele exibe-se no lugar em que aparece no código. Se você deseja movê-lo, é necessário definir outra propriedade de posição, como “relative” ou “absolute”.

Como funciona o valor “relative”

O valor “relative” da propriedade “position” do CSS permite que você posicione um elemento em relação à sua posição normal, usando as propriedades “top”, “bottom”, “left” ou “right”. Isso significa que você pode mover o elemento a uma distância específica em relação à sua posição normal, sem afetar o restante do layout da página.

Ao definir um valor “relative” para um elemento, ele permanece no fluxo normal do documento e ocupa o mesmo espaço que ocupava antes. Porém pode move-se em qualquer direção usando as propriedades mencionadas acima. Isso é útil quando você deseja fazer pequenos ajustes na posição de um elemento sem afetar o layout do restante da página.

Veja um exemplo simples:

<div style="position: relative; top: 50px; left: 100px; background-color: green; width: 100px; height: 100px;">

  Este é um exemplo de elemento com position: relative

</div>

Pois bem, aqui temos, o elemento é um retângulo verde de 100×100 pixels que tem sua posição definida como “relative”. O deslocamento “top” define-se como 50 pixels e o deslocamento “left” define-se como 100 pixels. Isso significa que o elemento move-se 50 pixels para baixo e 100 pixels para a direita em relação à sua posição normal.

É importante notar que, mesmo que você mova o elemento usando a propriedade “relative”, ele ainda permanece no fluxo normal do documento e afeta o layout dos outros elementos. Portanto, certifique-se de que a posição final do elemento não cause problemas no layout da página.

Como funciona o valor “absolute”

O valor “absolute” da propriedade “position” do CSS permite que você posicione um elemento em relação ao elemento pai mais próximo que tenha uma posição definida. Isso significa que, ao definir um valor “absolute” para um elemento, ele remove-se do fluxo normal do documento e posicionado em relação ao elemento pai com posição definida.

Ao definir um valor “absolute” para um elemento, você pode mover o elemento a uma distância específica em relação ao elemento pai, usando as propriedades “top”, “bottom”, “left” ou “right”. Isso é útil quando você deseja posicionar um elemento em um local específico da página, independentemente de seu posicionamento normal.

Veja um exemplo:

<div style="position: relative; width: 300px; height: 200px; background-color: gray;">

  <div style="position: absolute; top: 50px; left: 100px; background-color: green; width: 100px; height: 100px;">

    Este é um exemplo de elemento com position: absolute

  </div>

</div>

Nesse exemplo, o elemento pai tem sua posição definida como “relative”, enquanto o elemento filho tem sua posição definida como “absolute”. O deslocamento “top” define como 50 pixels e o deslocamento “left” define como 100 pixels. Isso significa que o elemento filho posiciona-se 50 pixels abaixo e 100 pixels para a direita em relação ao elemento pai.

É importante notar que, ao definir um valor “absolute” para um elemento, ele remove-se do fluxo normal do documento e não afeta o layout dos outros elementos. Portanto, certifique-se de que a posição final do elemento não cause problemas no layout da página. Além disso, lembre-se de que o elemento pai deve ter sua posição definida para que o valor “absolute” funcione corretamente.

Como funciona o valor “fixed”

O valor “fixed” da propriedade “position” do CSS permite que você posicione um elemento em relação à janela de visualização do navegador, ou seja, ele permanece fixo na mesma posição, independentemente da rolagem da página.

Ao definir um valor “fixed” para um elemento, você pode mover o elemento a uma distância específica em relação à janela de visualização do navegador, usando as propriedades “top”, “bottom”, “left” ou “right”. Isso é útil quando você deseja criar elementos que permaneçam visíveis na tela, como menus de navegação ou barras laterais.

Veja um exemplo simples:

<div style="position: fixed; top: 0; left: 0; background-color: green; width: 100%; height: 50px;">

  Este é um exemplo de elemento com position: fixed

</div>

Nesse exemplo, o elemento é uma barra verde fixa na parte superior da janela do navegador. O deslocamento “top” define como 0 e o deslocamento “left” define como 0. Desa forma, significa que o elemento posiciona-se na parte superior esquerda da janela do navegador.

É importante notar que, ao definir um valor “fixed” para um elemento, ele remove-se do fluxo normal do documento e não afeta o layout dos outros elementos. Além disso, o elemento fixo pode se sobrepor a outros elementos em sua página, então certifique-se de ajustar sua posição para não cobrir outros elementos importantes.

Outro ponto importante é que o valor “fixed” não funciona bem em dispositivos móveis, pois a posição do elemento pode afeta-se pela rotação do dispositivo. Por isso, é importante ter em mente a responsividade do layout e usar o valor “fixed” com moderação.

Como usar a propriedade “z-index”

A propriedade “z-index” do CSS permite que você controle a ordem em que os elementos são empilhados uns sobre os outros na página. Ela determina a posição de um elemento em relação a outros elementos que compartilham o mesmo espaço na página.

O valor da propriedade “z-index” pode ser definido como um número inteiro positivo ou negativo. Quanto maior o número, mais alto o elemento aparecerá na pilha, e quanto menor o número, mais baixo ele aparecerá.

<div style="position: relative; width: 200px; height: 200px; background-color: gray; z-index: 1;">

  <div style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: green; z-index: 2;">

    Este é um exemplo de elemento com z-index: 2

  </div>

</div>

Nesse exemplo, há dois elementos posicionados dentro do elemento pai. O elemento filho (verde) tem um valor “z-index” maior que o elemento pai (cinza), o que significa que ele aparecerá acima do elemento pai na pilha.

É importante lembrar que a propriedade “z-index” só funciona em elementos que possuem uma posição definida (como “relative”, “absolute” ou “fixed”). Além disso, a ordem de empilhamento é determinada não apenas pelo valor “z-index”, mas também pela ordem de posicionamento na página.

Ao usar a propriedade “z-index”, certifique-se de testar diferentes valores para evitar sobreposição indesejada ou ocultação de outros elementos na página.

Veja o primeiro artigo do Tutorial: Introdução rápida sobre CSS

Conclusão

Agora que você entendeu os diferentes valores da propriedade “position” do CSS e como usá-los para posicionar elementos na página, bem como a propriedade “z-index” para controlar a ordem de empilhamento desses elementos, você pode criar layouts mais complexos e dinâmicos para suas páginas da web.

Lembre-se de testar diferentes valores e ajustes para garantir que seus elementos sejam exibidos corretamente em diferentes tamanhos de tela e dispositivos. Com essas técnicas, você poderá criar designs elegantes e funcionais para suas páginas da web.

Perguntas frequentes