Posição Relativa

position: relative;

A posição relativa movimenta o elemento em relação ao seu espaço original. Um outra caracteristica deste valor é a manutenção do espaço que ele ocupava.

🖱️ Passe o mouse sobre o bloco verde e confira o resultado dos seguintes valores:

{position: relative; bottom: 50px; left: 100px;}

Posição Absoluta

position: absolut;

A posição absoluta movimenta o elemento em relação ao body, desconsiderando sua posição original. Este valor não mantém o espaço do elemento, desconsiderando-o totalmente.

Por isso que, mesmo uilizando a mesma configuração da posição relativa, o objeto se movimentou de forma diferente na tela.

🖱️ Passe o mouse sobre o bloco verde para ver o resultado.

Posição Sticky

position: sticky;

Com esta posição ativa, o elemento rolará junto com o contêiner, até que alcance o deslocamento especificado. Em seguida, parará de rolar, para permanecer visível.

Para ver essa propriedade em ação, continue descendo a página.

-

Este conteúdo é fornecido apenas para permitir que você utilize a barra de rolagem e veja o efeito da propriedade.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo aliquam quaerat tempora, id iusto vitae quod, accusantium natus excepturi quasi commodi iste aliquid eligendi quis aspernatur numquam culpa enim ipsum.

Posição Fixa

position: fixed;

Esta posição mantém o elemento fixo em relação ao body.

É o que acontece com essa simpática nuvenzinha do lado direito superior da tela. Você pode navegar pela página livremente, e ela permanece fixa, sempre no mesmo lugar.

Ah! Ela também é um link para o meu repositorio, com outros exercícios e páginas como esta 😉.