Confesso que revi essa parte três vezes, mas ainda não entrou na minha cabeça. Você teria uma material para me indicar?
Confesso que revi essa parte três vezes, mas ainda não entrou na minha cabeça. Você teria uma material para me indicar?
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