Diferença entre posicionamento estático e relativo

Em CSS, qual é a diferença entre o posicionamento estático (padrão) e o posicionamento relativo?

O posicionamento estático é o modelo de posicionamento padrão para elementos. Eles são exibidos na página onde foram renderizados como parte do fluxo normal de HTML. Elementos estaticamente posicionados não obedecem left, top, righte bottomregras:

Posicionamento relativo permite que você especifique um deslocamento específico ( left, topetc), que é relativo à posição normal do elemento no fluxo HTML. Portanto, se eu tiver uma caixa de texto dentro de um div, poderia aplicar o posicionamento relativo na caixa de texto para que ela seja exibida em um local específico em relação a onde normalmente seria colocado dentro de div:

Também há um posicionamento absoluto - por meio do qual você especifica a localização exata do elemento em relação a todo o documento ou o próximo elemento relativamente posicionado mais acima na árvore de elementos :

E quando um position: relativeé aplicado a um elemento pai na hierarquia:

Observe como nosso elemento de posição absoluta é limitado pelo elemento posicionado relativamente.

E, por último, está fixo. O posicionamento fixo restringe um elemento a uma posição específica na janela de visualização, que permanece no lugar durante a rolagem:

Você também pode observar o comportamento de elementos de posição fixa não causam rolagem porque não são considerados limitados pela janela de visualização:

Considerando que os elementos absolutamente posicionados ainda são limitados pela janela de visualização e causarão rolagem:

..a menos que é claro que seu elemento pai usa overflow: ? para determinar o comportamento do pergaminho (se houver).

Com posicionamento absoluto e posicionamento fixo, os elementos são retirados do fluxo HTML.

Você pode ter uma visão geral simples aqui: W3School

Além disso, se bem me lembro, ao declarar um elemento relativo, ele ficará, por padrão, no mesmo lugar que deveria, mas você ganha a capacidade de posicionar absolutamente os elementos dentro dele em relação a este elemento, o que achei muito útil no passado.

Em resposta a "por que o CSS ainda implementaria position: static;" em um cenário, usando posição: relativa para um pai e posição: absoluta para a criança limita a largura de escala da criança. Em um sistema de menu horizontal, onde você poderia ter 'colunas' de links, usar 'width: auto' não funciona com pais relativos. Nesse caso, alterá-lo para 'estático' permitirá que a largura seja variável dependente do conteúdo interno.

Passei algumas horas me perguntando por que não conseguia fazer meu contêiner se ajustar com base na quantidade de conteúdo dentro dele. Espero que isto ajude!

Posição relativa permite usar superior / inferior / esquerda / direita para o posicionamento. A estática não permitirá que você faça isso, a menos que use parâmetros de margem. Há uma diferença entre Top e margin-top.

Você não precisa usar estática, pois é padrão

A posição relativa é relativa ao fluxo normal. A posição relativa desse elemento (com deslocamentos) é relativa à posição onde o elemento estaria normalmente se não fosse movido.

Matthew Abbott tem uma resposta muito boa.

Absoluto e itens posicionado em relação obedecer top, left, righte bottomcomandos (offsets) onde os itens estáticos posicionados não.

Os itens relativamente posicionados movem os deslocamentos de onde estariam normalmente no html.

Os itens posicionados absolutos movem os deslocamentos do documento ou do próximo elemento relativamente posicionado para cima na árvore DOM.

Estático: Um elemento posicionado ESTÁTICO é o que obtemos por DEFAULT (posicionamento normal de objetos).

Relativo: Relativo à posição atual, mas pode ser movido. Ou UM elemento posicionado RELATIVO é posicionado em relação a SI MESMO.

estático e relativo são atributos de posição. relativo é usado para muitos usos. Nem por um. Mas tenha em mente que estático e relativo não prejudica o fluxo normal de documentos do Html. static é a posição padrão quando você grava qualquer elemento em Html. Se um elemento tem uma posição relativa, esse elemento pode ser posicionado em relação ao seu local nativo. quando você quiser ajustar o elemento de pequenos espaços, use a posição relativa para que você não precise adicionar a margem, preenchimento, etc. se o elemento tiver uma posição relativa e tiver um elemento filho. Aqui podemos fazer medições em relação ao seu pai. Se você adicionar largura 10% ao filho, isso significa (largura + preenchimento) x10%. Mas você não adicionar a palavra-chave relativa, obterá largura x 10%. Fora isso, o uso mais importante do parente é; você pode posicionar qualquer elemento em cima dele.