Diferença entre posicionamento estático e relativo

89

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

Jrdioko
fonte
21
A diferença é que você digita com frequência position: relativee nunca digita position: static:)
thirtydot

Respostas:

169

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:

elementos posicionados estaticamente obedecem ao fluxo normal de HTML.

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:

elementos relativamente posicionados obedecem ao fluxo de HTML, mas fornecem a capacidade de ajustar sua posição em relação à sua posição normal no fluxo de HTML.

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 :

elementos absolutamente posicionados são retirados do fluxo de HTML e podem ser posicionados em um local específico no documento ...

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

... ou posicionado em relação ao primeiro elemento pai na árvore HTML que está relativamente posicionado.

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:

elementos de posição fixa também são retirados do fluxo de HTML, mas não são limitados pela janela de visualização e não rolarão com a página.

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:

elementos de posição fixa não têm efeito na rolagem.

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

elementos absolutamente posicionados ainda são afetados pelos limites da janela de visualização, a menos que o estouro seja usado em um elemento pai.

..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.

Matthew Abbott
fonte
4
Boa resposta, mas (para posição relativa) o deslocamento não é baseado na posição normal do elemento?
Baztoune
4
Eu concordo com Baztoune, esta definição para elementos relativamente posicionados é enganosa. Um elemento statice relativesão iguais, exceto que com o último você pode reposicioná-lo em relação à sua posição original , não ao elemento que o contém - é aí que absoluteentra. Além disso, como qualquer elemento posicionado usando um valor diferente do que staticvocê pode usar z-index.
Ryan Williams
Retrabalhei esta resposta para definir com mais precisão o posicionamento relativo e incluí imagens para demonstrar os diferentes tipos de posição.
Matthew Abbott de
3
Eu me pergunto por que o CSS ainda implementaria em position: static;vez de simplesmente substituí-lo position: relative;por padrão? Se alguém não quiser posicionar o item diferente de top: 0;e left: 0;então não vamos fazer, certo? Existe um motivo subjacente pelo qual position: static;ainda é obrigatório como parte do CSS?
cram2208
8
@ cram2208 porque o relativo faz com que os nós posicionados de forma absoluta dos filhos sejam posicionados em relação a eles, o estático permite que os filhos com posição absoluta ignorem sua posição e sejam posicionados em relação ao elemento posicionado relativo mais próximo. É um conceito importante para se ter
Felype
7

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.

Stoffe
fonte
29
w3schools ... Não vou votar contra isso, mas você deve viver com a vergonha.
Myles Gray
4
Enquanto isso, em 2017, o W3Schools não é tão ruim quanto costumava ser (ainda não é perfeito, mas eles levaram a reação da comunidade a sério e realmente melhoraram).
Priidu Neemre de
Enquanto isso, em 2018, W3Schools ainda não é tão ruim quanto costumava ser, mas se sinta mal por eles que sua reputação ainda hoje é tal que mencionar o primeiro comentário acima para outros desenvolvedores ainda recebe uma risada clássica ... voltar na minha época ... W3School .... primeiras impressões ei ...
redfox05
7

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!

user3233352
fonte
Esta é a resposta! Todo mundo fala aos profissionais apenas para o posicionamento relativo, perdendo o ponto em uma pergunta como esta: qual é a diferença.
Bartis Áron
5

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

Frontsideup
fonte
2

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.

AvadhootKulkarni
fonte
2

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.

Connor Leech
fonte
0

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.

Arif
fonte
0

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.

Lakruwan Pathirage
fonte