Diferença entre estilo = “posição: absoluta” e estilo = “posição: relativa”

103

Qualquer um 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?

Estou usando absoluteagora, mas também quero explorar relative. Como isso mudará o posicionamento?

css css-position

— Varun
fonte

1

A propriedade 'position' no CSS 2.1.

— Josh Lee

@rolfl Hm, essa edição foi realmente necessária em uma questão de 3 anos? Eu teria chamado de "muito pequeno".

— Sr. Lister

3

@MrLister Surgiu em uma fila de revisão de 'edição sugerida' ... Não percebi a idade. Mas, se fosse uma velha questão de 60 segundos, teria feito diferença?

— rolfl

@rolfl Na verdade, não; Eu ainda teria votado como "muito menor".

— Sr. Lister

178

O posicionamento absoluto significa que o elemento é retirado completamente do fluxo normal do layout da página. No que diz respeito aos demais elementos da página, o elemento posicionado de forma absoluta simplesmente não existe. O próprio elemento é então desenhado separadamente, meio que "por cima" de todo o resto, na posição que você especifica usando os left, right, top and bottomatributos.

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 tem um atributo de posição diferente de static(os elementos da página são estáticos quando nenhum atributo de posição é especificado) ou o corpo do documento (navegador janela de visualização) se tal ancestral não existir.

Por exemplo, se eu tivesse este código:

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

... o <div>seria posicionado 20px do topo da janela de visualização do navegador e 20px da borda esquerda do mesmo.

No entanto, se eu fizesse algo assim:

 <div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>

... então o innerdiv seria posicionado 20px do topo do outerdiv e 20px da borda esquerda do mesmo, porque o outerdiv não está posicionado com position:staticporque o definimos explicitamente para uso position:relative.

O posicionamento relativo, por outro lado, é como declarar nenhum posicionamento, mas os left, right, top and bottomatributos "empurram" o elemento para fora de seu layout normal. O resto dos elementos na página ainda são dispostos como se o elemento estivesse em seu local normal.

Por exemplo, se eu tivesse este código:

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>

... então, todos os três <span>elementos ficariam lado a lado sem se sobrepor.

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

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>

... então Span2 se sobreporia ao lado direito de Span1 em 5px. Span1 e Span3 ficariam exatamente no mesmo lugar que no primeiro exemplo, deixando uma lacuna de 5px entre o lado direito de Span2 e o lado esquerdo de Span3.

Espero que isso esclareça um pouco as coisas.

— AgentConundrum
fonte

39

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

Posicionamento absoluto: um elemento procura os eixos de coordenadas disponíveis mais próximos entre seus elementos pais. O elemento é então posicionado especificando os deslocamentos deste eixo de coordenadas. Ele é removido do fluxo normal do documento.

Fonte

— Premraj
fonte

15

Definitivamente, você vai querer verificar este artigo sobre posicionamento de 'A List Apart'. Ajudou a desmistificar o posicionamento do CSS (o que parecia insano para mim, antes deste artigo).

— Jbrennan
fonte

8

Com o posicionamento CSS, você pode colocar um elemento exatamente onde deseja 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 o posicionamento absoluto ou relativo.

Ambas as posições têm características diferentes. Em CSS Depois de definir a posição, você poderá 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 tem 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: Posição Relativa vs Absoluta

— GowriShankar
fonte

6

OK, uma resposta muito óbvia aqui ... basicamente a posição relativa é relativa ao elemento ou janela anterior, enquanto o absoluto não se preocupa com os outros elementos, a menos que seja um pai se você usar superior e esquerdo ...

Olha o exemplo que crio para você mostrar as diferenças ...

Além disso, você pode ver isso em ação, usando o css que 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;
}

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-1">
  </div>
</div>

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-2">
  </div>
</div>

Expandir trecho

— Alireza
fonte

4

O posicionamento absoluto é baseado nas coordenadas da tela:

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 estava originalmente :)

— Damien-Wright
fonte

3

Relativo:

Um elemento com position: relative;está posicionado em relação à sua posição normal.
Se você não adicionar atributos de posicionamento (superior, esquerdo, inferior ou direito) em um elemento relativo, ele não terá nenhum efeito em seu posicionamento. Ele se comportará exatamente como um position: staticelemento.
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.
Um elemento com este tipo de posicionamento é afetado por outros elementos e ele próprio também afeta outros.

Absoluto:

Um elemento com position: absolute;permite que você coloque qualquer elemento exatamente onde deseja que esteja. Você usa os atributos de posicionamento superior, esquerdo, inferior. e direito de definir o local.
Ele é colocado em relação ao ancestral não estático mais próximo. Se esse contêiner não existir, ele será colocado em relação à própria página.
Ele é removido do fluxo normal de elementos na página.
Um elemento com este tipo de posicionamento não é afetado por outros elementos e também não afeta o fluxo de outros elementos.

Veja este exemplo autoexplicativo para melhor clareza. https://codepen.io/nyctophiliac/pen/BJMqjX

— Pransh Tiwari
fonte

0

Absoluto coloca o objeto (div, span, etc.) em um local absoluto forçado (geralmente determinado em pixels) e o relativo irá colocá-lo a uma certa distância de onde sua localização normalmente estaria. Por exemplo:

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

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

— Charles Zink
fonte

0

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

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

— Vil Ignoble
fonte

0

posição: relativa age como um elemento pai position: absoluto age como um filho da posição relativa. você pode ver o exemplo abaixo

.postion-element{
   position:relative;
   width:200px;
   height:200px;
   background-color:green;
 }
.absolute-element{
  position:absolute;
  top:10px;
  left:10px;
  background-color:blue;
 }

— Imran Khan
fonte