Position relative, absolute ou fixed?

Escrito por Matheus Rocha.

quebra cabecas pagina web

 

Olá, pessoal! Esse é o começo de uma série de artigos onde abordaremos de forma simplificada, as propriedades standard do CSS. Quando digo standard, me refiro à propriedades fundamentais para o desenvolvimento de qualquer documento web, que utilize CSS (Cascading Style Sheet) como componente de principal componente de design.

 

Entenda sua página-da-Web como sendo um quebra-cabeças - peças que encaixam. Se montarmos um quebra-cabeça e o penduramos na parede, como um quadro ou um retrato, haverá uma força que “empurra” as peças para baixo. O nome dessa força, nós conhecemos como gravidade. Ela segue de cima para baixo, e seu conceito implica em sermos puxados em direção ao “núcleo” da terra. Trazendo para nossa realidade WEBiana, funciona da mesma forma, só que o núcleo é o topo do seu navegador.

 

"Como assim, topo do meu navegador?"
A gravidade no caso dos Websites, é contrária à do exemplo do núcleo-da-terra. Ela atrai os elementos de baixo para cima, fazendo com que seu documento Web possua uma altura automática. Esta medida aumenta na medida que o conteúdo é disposto.

 

"E o Position, onde entra nessa história?"
Voltando aos conceitos triviais de física, sabemos que dois corpos não ocupam o mesmo lugar no espaço. Assim também segue sua página Web. Dois elementos não ocupam o mesmo lugar no espaço. Existem eixos X, Y e Z (largura, altura e profundidade sucessivamente). Ainda que aparentemente um esteja sob o outro, se encontram em “camadas” ou profundidades diferentes.

 

position css

 

Se usarmos

  1. position:relative;

Nosso elemento se comportará da forma como acabamos de prever - ocupando um lugar no espaço, que no caso é o elemento-pai. (o qual aplicamos a propriedade, está submetido)

 

Já, usando

  1. position:absolute;

Nosso elemento passa a NÃO ocupar um lugar no interior do seu pai. Seu posicionamento fica relativo ao “próximo” elemento que contiver position:relative, entre sua hierarquia, ajustando-se automaticamente para a posição X=0 e Y=0 da tela, “encostando” o elemento à margem esquerda e no topo do elemento-pai.

Se o elemento-pai contiver position: relative; o elemento filho com position:absolute; ficará relativo ao pai. Caso contrário, segue relativo ao navegador, ou elemento body do nosso documento HTML.

 

Com

  1. position:fixed;

O elemento se posicionará de forma fixa, não ocupando um espaço no documento web, mas sim na tela do navegador. Ao rolar a página, ele permanece visível e fixo em sua posição. Geralmente é usado em componentes como: menus e propagandas-âncora que acompanham a rolagem da página

 

 

Espero ter ajudado você a entender um pouco melhor como funciona a propriedade Position. Existe um extenso material na internet acerca das propriedades CSS, pesquise e complemente seus estudos. Até mais!

Tags: Cascading Style Sheet Position