Aprenda nessa aula o funcionamento da propriedade position no CSS para ajudar a organizar os elementos de sua página.

Agora que você já aprendeu um pouco sobre float e display, e já tem noção suficiente de como organizar os elementos na tela para diagramar seu site, vamos ver uma propriedade que vai auxiliar você nesse processo, que é o position.

Lembrando que essa propriedade deve apenas auxiliar, você não deve abusar dessa propriedade para ajustar os elementos na tela, pois pode ser um problema, você vai utilizar position para fazer modificações simples no posicionamento dos elementos na sua página.

A propriedade position no CSS pode receber basicamente, 4 valores: Static, relative, fixed e absolute.

Static

Valor padrão de todos os elemento do HTML. Quando criamos um elemento e não informamos o position, ele naturalmente é static. Esse valor de position significa que o elemento não está posicionado, mas seguindo o fluxo normal da renderização.

Ao usar o “position: static” não poderemos usar as propriedades top, right, bottom e left. Essas propriedades são usadas para informar um valor (que pode ser em pixel) de afastamento do elemento na direção indicada.

Não devemos confundir esses valores de afastamento com “margin” que aprendemos anteriormente, pois ao usar margin você afeta tanto o elemento que recebe o valor quanto os demais, já usando aa propriedade “top” por exemplo, só afetamos o elemento que recebeu o valor.

Relative

A princípio se aplicarmos “position: relative” nao percebemos nenhuma diferença do static, pois ele se mantém seguindo o fluxo normal, porém esse valor possibilita o elemento de recebe valores de coordenadas top/bottom/left/right, e esses valores vão distanciar esse elemento em relação ao elemento que o contém (pai);

Fixed

Ao aplicar “fixed” no position de um elemento vamos literalmente fixar esse elemento na tela, e ao rolar a página em qualquer direção ele permanece fixo. O valor que colocarmos de coordenada (top, bottom, left e right) é em relação a tela, não ao elemento pai (como os outros).

Absolute

É um valor poderoso, pois ele vai usar suas coordenadas para se posicionar fora do fluxo normal, ele vai procurar o elemento superior que possua algum position (relative, absolute ou fixed) e caso não ache, vai se posicionar em relação a tela, como o fixed;

Quando posicionamos elementos pode ser que um fique por cima de outro, e isso pode gerar um problema: como eu indico o elemento que deve ficar por cima, e qual deve ficar por baixo? Z-index, assunto para a próxima aula!