Position

Absolute: Um elemento com 'position: absolute;' é posicionado em relação ao seu primeiro ancestral que tenha position: relative, absolute, sticky ou fixed. (ou seja se nao houver nenhum elemento "pai" com algum outro "position" o elemento sera posicionado em relação ao elemento '< html >''). Elementos com 'position: absolute;'' são retirados do fluxo normal do documento, o que significa que não ocupam espaço no layout padrão. Você pode usar as propriedades "top", "right", "bottom" e "left" para definir a posição do elemento.

Relative: Um elemento com 'position: relative;' é posicionado em relação à sua div "pai". Isso significa que você pode usar "top", "right", "bottom" e "left" para ajustar a posição do elemento a partir do seu ponto de origem, sem removê-lo do fluxo normal. Outros elementos na página ainda se comportam como se o elemento estivesse em sua posição original, o que pode causar sobreposição.

Sticky: Um elemento com 'position: sticky;' é um híbrido entre relative e fixed. Ele se comporta como relative até que um determinado ponto de rolagem seja atingido, momento em que ele "gruda" (fica "sticky") e se comporta como fixed. Você pode usar "top", "right", "bottom" e "left" para definir quando o elemento deve "grudar". Esse efeito é útil para criar cabeçalhos ou elementos de navegação que permanecem visíveis enquanto o usuário rola a página. (Caso o exemplo acima não esteja tendo nenhum efeito ao rolar a página, aumente o zoom)

Fixed: Um elemento com 'position: fixed;' é posicionado em relação à janela de visualização (viewport), ou seja, ele permanece no mesmo lugar na tela, independentemente de rolagem. Assim como absolute, ele é retirado do fluxo normal do documento. As propriedades "top", "right", "bottom" e "left" podem ser usadas para definir a posição do elemento em relação à janela de visualização.