Diferença entre style = “position: absolute” e style = “position: relative”

Alguém pode me dizer a diferença entre style = "position:absolute" e style = "position:relative" e como eles diferem no caso de eu adicioná-lo aos elementos div / span / input ?

Eu estou usando absolute agora, mas eu quero explorar o relative também. Como isso vai mudar o posicionamento?

Posicionamento absoluto significa que o elemento é retirado completamente do stream normal do layout da página. No que diz respeito ao resto dos elementos da página, o elemento absolutamente posicionado simplesmente não existe. O elemento em si é então desenhado separadamente, como “em cima” de todo o resto, na posição que você especifica usando os atributos left, right, top and bottom .

Usando a posição que você especifica com esses atributos, o elemento é então colocado nessa posição dentro de seu último elemento ancestral que possui um atributo de posição diferente de static (os elementos da página são padronizados quando nenhum atributo de posição é especificado) ou o corpo do documento ( viewport do navegador) se não existir tal ancestral.

Por exemplo, se eu tivesse esse código:

  

… o

seria posicionado a 20px da parte superior da janela de visualização do navegador e 20px da margem esquerda da mesma.

No entanto, se eu fiz algo assim:

  

… então o div inner seria posicionado 20px do topo do div outer , e 20px da borda esquerda do mesmo, porque o div outer não é posicionado com a position:static porque nós explicitamente configuramos para usar position:relative

Posicionamento relativo, por outro lado, é como afirmar nenhum posicionamento, mas os atributos left, right, top and bottom “empurram” o elemento para fora do layout normal. O restante dos elementos da página ainda é definido como se o elemento estivesse em seu ponto normal.

Por exemplo, se eu tivesse esse código:

 Span1 Span2 Span3 

… então todos os três elementos se sentariam um ao lado do outro sem se sobrepor.

Se eu definir o segundo para usar o posicionamento relativo, assim:

 Span1 Span2 Span3 

… então Span2 se sobrepõe ao lado direito da Span1 por 5px. Span1 e Span3 ficariam exatamente no mesmo lugar que no primeiro exemplo, deixando um espaço de 5px entre o lado direito do Span2 e o lado esquerdo do Span3.

Espero que esclarece um pouco as coisas.

Você definitivamente vai querer verificar este artigo de posicionamento de A List Apart. Ajudei a desmistificar o posicionamento do CSS (o que me pareceu insano antes deste artigo).

Posicionamento relativo: O elemento cria seus próprios eixos de coordenadas, em um deslocamento de local do eixo de coordenadas da janela de visualização. Faz parte do stream de documentos, mas mudou.

Posicionamento absoluto: Um elemento procura os eixos de coordenadas disponíveis mais próximos entre seus elementos pai. O elemento é então posicionado especificando deslocamentos desse eixo de coordenadas. É removido do stream normal do documento.

insira a descrição da imagem aqui

Fonte

Com o posicionamento CSS, você pode colocar um elemento exatamente onde você quer em sua página.

Quando você vai usar o posicionamento CSS, a primeira coisa que você precisa fazer é usar a posição da propriedade CSS para informar ao navegador se você vai usar posicionamento absoluto ou relativo.

Ambas as Posições estão tendo características diferentes. Em CSS Depois de definir a Posição, você pode usar os atributos superior, direito, inferior e esquerdo.

Posição Absoluta

Um elemento de posição absoluta é posicionado em relação ao primeiro elemento pai que possui uma posição diferente de estática.

Posição relativa

Um elemento posicionado relativo é posicionado em relação à sua posição normal.

Para posicionar um elemento relativamente, a posição da propriedade é definida como relativa. A diferença entre o posicionamento absoluto e relativo é como a posição está sendo calculada.

Mais: Postion Relative vs Absolute

O posicionamento absoluto é baseado em co-ordiantes do display:

 position:absolute; top:0px; left:0px; 

^ coloca o elemento na parte superior esquerda da janela.

A posição relativa é relativa a onde o elemento é colocado:

 position:relative; top:1px; left:1px; 

^ coloca o elemento 1px para baixo e 1px da esquerda de onde ele originalmente estava sentado 🙂

OK, uma resposta muito óbvia aqui … basicamente, a posição relativa é relativa ao elemento ou janela anterior, enquanto o absoluto não se importa com os outros elementos, a menos que seja um pai, se você estiver usando o topo e a esquerda …

Veja o exemplo que eu criei para você mostrar as diferenças …

insira a descrição da imagem aqui

Além disso, você pode vê-lo em ação, usando o CSS que eu criei para você, você pode ver como as posições absolutas e relativas se comportam:

 .parent { display: inline-block; width: 180px; height: 160px; border: 1px solid black; } .black { position: relative; width: 100px; height: 30px; margin: 5px; border: 1px solid black; } .red { width: 100px; height: 30px; margin: 5px; top: 16px; background: red; border: 1px solid red; } .red-1 { position: relative; } .red-2 { position: absolute; } 
 

Quando você vai usar o posicionamento CSS, a primeira coisa que você precisa fazer é usar a posição da propriedade CSS para informar ao navegador se você vai usar posicionamento absoluto ou relativo.

Ambas as Posições estão tendo características diferentes. Em CSS Depois de definir a Posição, você pode usar os atributos superior, direito, inferior e esquerdo.

Posição Absoluta

Um elemento de posição absoluta é posicionado em relação ao primeiro elemento pai que possui uma posição diferente de estática.

Posição relativa

Um elemento posicionado relativo é posicionado em relação à sua posição normal.

Para posicionar um elemento relativamente, a posição da propriedade é definida como relativa. A diferença entre o posicionamento absoluto e relativo é como a posição está sendo calculada.

Relativo:

  1. Um elemento com position: relative; está posicionado em relação à sua posição normal.

  2. Se você não adicionar nenhum atributo de posicionamento (superior, esquerda, inferior ou direita) em um elemento relativo, ele não terá nenhum efeito sobre seu posicionamento. Ele se comportará exatamente como uma position: static elemento position: static .

  3. Mas se você adicionar algum outro atributo de posicionamento, digamos, top: 10px ;, ele mudará sua posição 10 pixels para baixo de onde normalmente estaria.

  4. Um elemento com esse tipo de posicionamento é afetado por outros elementos e também afeta outros.

Absoluto:

  1. Um elemento com position: absolute; permite colocar qualquer elemento exatamente onde você quer que ele esteja. Você usa os atributos de posicionamento top, left, bottom. e direito de definir a localização.

  2. É colocado em relação ao ancestral não estático mais próximo. Se não houver esse contêiner, ele será colocado em relação à própria página.

  3. Ele é removido do stream normal de elementos na página.

  4. Um elemento com este tipo de posicionamento não é afetado por outros elementos e também não afeta o stream de outros elementos.

Veja este exemplo auto-explicativo para melhor clareza. https://codepen.io/nyctophiliac/pen/BJMqjX

Absolute coloca o object (div, span, etc.) em um local forçado absoluto (geralmente determinado em pixels) e o relativo colocará um determinado valor longe de onde seria normalmente a localização. Por exemplo:

posição: relativa; esquerda: -20px;

Pode fazer com que o lado esquerdo do texto desapareça se estiver dentro de 20px para a borda esquerda da canvas.

position: absolute pode ser colocado em qualquer lugar e permanecer lá como 0,0.

position: relative é colocado com deslocamento do local em que é originalmente colocado no navegador.