Existe um conjunto de propriedades que podemos utilizar para posicionar um elemento na página, que são top, left, bottom e right. Porém essas propriedades, por padrão, não são obedecidas por nenhum elemento, pois elas dependem de uma outra propriedade, a position.
A propriedade position determina qual é o modo de posicionamento de um elemento, e ela pode receber como valor static, relative, absolute ou fixed. Veremos o comportamento de cada um deles, junto com as propriedades de coordenadas.
O primeiro valor, padrão para todos os elementos, é o static. Um elemento com posição static permanece sempre em seu local original no documento, aquele que o navegador entende como sendo sua posição de renderização. Se passarmos algum valor para as propriedades de coordenadas, eles não serão respeitados.
Um dos valores para a propriedade position que aceitam coordenadas é o relative. Com ele, as coordenadas que passamos são obedecidas em relação à posição original do elemento. Por exemplo:
.logotipo {
position: relative;
top: 20px;
left: 50px;
}
Os elementos em nosso documento que receberem o valor “logotipo” em seu atributo class terão 20px adicionados ao seu topo e 50px adicionados à sua esquerda em relação à sua posição original. Note que, ao definirmos coordenadas, estamos adicionando pixels de distância naquela direção, então o elemento será renderizado mais abaixo e à direita em comparação à sua posição original.
O próximo modo de posicionamento que temos é o absolute, e ele é um pouco complexo. Existem algumas regras que alteram seu comportamento em determinadas circunstâncias. Por definição, o elemento que tem o modo de posicionamento absolute toma como referência qualquer elemento que seja seu pai na estrutura doHTMLcujomodo de posicionamento seja diferente de static (que é o padrão), e obedece às coordenadas de acordo com o tamanho total desse elemento pai.
Quando não há nenhum elemento em toda a hierarquia daquele que recebe o posicionamento absolute que seja diferente de static, o elemento vai aplicar as coordenadas tendo como referência a porção visível da página no navegador. Por exemplo:
Estrutura HTML
<div class="quadrado"></div>
<div class="quadrado absoluto"></div>
Estilo CSS
.quadrado {
background: green;
height: 200px;
width: 200px;
}
.absoluto {
position: absolute;
top: 20px;
right: 30px;
}
Seguindo o exemplo acima, o segundo elemento < div>, que recebe o valor “absoluto” em seu atributo class, não tem nenhum elemento como seu “pai” na hierarquia do documento, portanto ele vai alinhar-se ao topo e à direita do limite visível da página no navegador, adicionando respectivamente 20px e 30px nessas direções. Vamos analisar agora o exemplo a seguir:
Estrutura HTML
<div class="quadrado relativo">
<div class="quadrado absoluto"></div>
</div>
Estilo CSS
.quadrado {
background: green;
height: 200px;
width: 200px;
}
.absoluto {
position: absolute;
top: 20px;
right: 30px;
}
.relativo {
position: relative;
}
Nesse caso, o elemento que recebe o posicionamento absolute é “filho” do elemento que recebe o posicionamento relative na estrutura do documento, portanto, o elemento absolute vai usar como ponto de referência para suas coordenadas o elemento relative e se posicionar 20px ao topo e 30px à direita da posição original desse elemento.
O outro modo de posicionamento, fixed, sempre vai tomar como referência a porção visível do documento no navegador, e mantém essa posição inclusive quando há rolagem na tela. É uma propriedade útil para avisos importantes que devem ser visíveis com certeza.
relative
fixed
absolute