2
respostas

Position relative e absolute

Confesso que revi essa parte três vezes, mas ainda não entrou na minha cabeça. Você teria uma material para me indicar?

2 respostas

Tem esses dois sites (referências) com muitos exemplos, mas para compreender as diferenças de fato, só na prática. Faça seus próprios exemplos, até entender como funcionam.

site: http://www.maujor.com/tutorial/absrel.php

site: https://developer.mozilla.org/pt-BR/docs/Web/CSS/position

Fala Paulo, tudo bom?

Vamos lá: tanto relative quanto absolute tem como REFERÊNCIA o elemento pai na árvore que possua um position(relative ou absolute) definido. Caso não tenha nenhum position definido, ele sobe até chegar no <body>.

Por exemplo: Se o seu elemento pai definiu position:relative e o filho absolute, o filho terá como referência o pai.

O position:relative quando é movido "mantém o espaço" que deveria ocupar caso você não mexesse utilizando as propriedades top, right, left, bottom para movê-lo.

Já o position:relative não mantém esse espaço, ou seja, permite que "outras coisas" preencham.

https://tableless.com.br/propriedade-position-do-css/

http://pt.stackoverflow.com/questions/38215/quando-usar-position-absolute-ou-relative-em-css