Entendendo a propriedade Position do CSS

Olá a todos, hoje veremos uma propriedade CSS muito utilizada no desenvolvimento de sites, porém muitas vezes erroneamente. É muito comum vermos sua utilização aplicada a diagramação o que muitas vezes, devido a incompatibilidade dos browsers, gera inconcistência do layout, para esse uso a propriedade mais recomendada é a Float.

Existem 3 valores para a propriedade position: Relative, Absolute e Fixed, abaixo veremos um pouco sobre cada uma, e onde aplica-las.

Relative

Um elemento que possui a propriedade definida como Relative, define que seu ponto de registro é seu próprio ponto superior esquerdo, e assim, é posicionado utilizando as demais propriedades (margin, top, left, etc) a partir desse ponto.

Ponto de registro do elemento com position relative

Ponto de registro do elemento com position relative

Absolute

Ao contrário do posicionamento relativo, o absoluto define seu ponto de registro utilizando o ponto superior esquerdo de outro elemento. Agora de qual elemento? Isso você quem irá determinar, o elemento com posicionamento absoluto utiliza como ponto de registro o primeiro elemento pai setado com posicionamento absoluto ou relativo.

Nota: O que define um elemento ser pai de outro, é sua estrutura. O pai é o container que envolve os filhos, ou seja, o pai de um elemento X é o elemento Y que envolve o elemento X.

Para baixar um exemplo HTML clique aqui.

Fixed

O posicionamento Fixed, diferentemente do relative e absolute, faz com que o elemento fixe seu ponto de registro em relação, fazendo com que mesmo que você faça a rolagem da página ele fique fixo na posiçao inicial definida.

Para baixar um exemplo HTML clique aqui.

Espero que tenham gostado do artigo, um abraço e até a próxima.

voltar