Diferencia entre estilo = "posición: absoluta" y estilo = "posición: relativa"

103

¿Alguien puede decirme la diferencia entre style = "position:absolute"y style = "position:relative" y cómo se diferencian en caso de que lo agregue a los elementos div/ span/ input?

Lo estoy usando absoluteahora mismo, pero también quiero explorar relative. ¿Cómo cambiará esto el posicionamiento?

css css-position Varun
fuente
1
La propiedad 'posición' en CSS 2.1.
Josh Lee
@rolfl Hm, ¿esta edición fue realmente necesaria en una pregunta de 3 años? Yo lo habría llamado "demasiado menor".
Mr Lister
3
@MrLister Apareció en una cola de revisión de 'edición sugerida' ... No me di cuenta de la edad. Pero, si fuera una pregunta de 60 segundos, ¿habría marcado la diferencia?
Rolfl
@rolfl No realmente; Todavía habría votado "demasiado menor".
Mr Lister

Respuestas:

178

El posicionamiento absoluto significa que el elemento se saca completamente del flujo normal del diseño de la página. En cuanto al resto de elementos de la página, el elemento absolutamente posicionado simplemente no existe. El elemento en sí se dibuja por separado, una especie de "encima" de todo lo demás, en la posición que especifique utilizando los left, right, top and bottomatributos.

Usando la posición que especifique con estos atributos, el elemento se coloca en esa posición dentro de su último elemento ancestro que tiene un atributo de posición de cualquier otra cosa que no sea static(elementos de página predeterminados como estáticos cuando no se especifica ningún atributo de posición), o el cuerpo del documento (navegador viewport) si no existe tal ancestro.

Por ejemplo, si tuviera este código:

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

...el <div> colocaría a 20px desde la parte superior de la ventana del navegador y a 20px desde el borde izquierdo de la misma.

Sin embargo, si hiciera algo como esto:

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

... entonces el innerdiv se colocaría 20px desde la parte superior del outerdiv, y 20px desde el borde izquierdo del mismo, porque el outerdiv no está posicionado con position:staticporque lo hemos configurado explícitamente para usar position:relative.

El posicionamiento relativo, por otro lado, es como decir que no hay posicionamiento en absoluto, pero el left, right, top and bottom atributos "empujan" al elemento fuera de su diseño normal. Sin embargo, el resto de los elementos de la página todavía se distribuyen como si el elemento estuviera en su lugar normal.

Por ejemplo, si tuviera este código:

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

... entonces los tres <span> elementos se colocarían uno al lado del otro sin superponerse.

Si configuro el segundo <span>para usar el posicionamiento relativo, así:

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

... entonces Span2 se superpondría al lado derecho de Span1 en 5px. Span1 y Span3 se ubicarían exactamente en el mismo lugar que en el primer ejemplo, dejando un espacio de 5px entre el lado derecho de Span2 y el lado izquierdo de Span3.

Espero que aclare un poco las cosas.

AgenteConundrum
fuente
39

Posicionamiento relativo: el elemento crea sus propios ejes de coordenadas, en una ubicación desplazada desde el eje de coordenadas de la ventana gráfica. Es parte del flujo de documentos pero cambiado.

Posicionamiento absoluto: un elemento busca los ejes de coordenadas disponibles más cercanos entre sus elementos principales. A continuación, el elemento se posiciona especificando desplazamientos desde este eje de coordenadas. Se elimina del flujo normal del documento.

ingrese la descripción de la imagen aquí

Fuente

Premraj
fuente
15

Definitivamente querrá consultar este artículo de posicionamiento de 'Una lista aparte'. Ayudó a desmitificar el posicionamiento CSS (que me parecía una locura, antes de este artículo).

jbrennan
fuente
8

Con el posicionamiento CSS, puede colocar un elemento exactamente donde lo desee en su página.

Cuando vaya a utilizar el posicionamiento CSS, lo primero que debe hacer es utilizar la posición de la propiedad CSS para indicarle al navegador si va a utilizar el posicionamiento absoluto o relativo.

Ambas posiciones tienen características diferentes. En CSS Una vez que establezca la Posición, podrá usar los atributos superior, derecha, inferior e izquierda.

Posición absoluta

Un elemento de posición absoluta se posiciona en relación con el primer elemento padre que tiene una posición distinta a estática.

Posición relativa

Un elemento posicionado relativo se posiciona en relación con su posición normal.

Para colocar un elemento de forma relativa, la posición de la propiedad se establece como relativa. La diferencia entre el posicionamiento absoluto y relativo es cómo se calcula la posición.

Más: posición relativa vs absoluta

GowriShankar
fuente
6

OK, una respuesta muy obvia aquí ... básicamente la posición relativa es relativa al elemento o ventana anterior, mientras que a la absoluta no le importan los otros elementos a menos que sea un padre si usa top and left ...

Mira el ejemplo que creo para ti para mostrar las diferencias ...

ingrese la descripción de la imagen aquí

También puedes verlo en acción, usando el CSS que creo para ti, puedes ver cómo se comportan las posiciones absolutas y relativas:

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

Alireza
fuente
4

El posicionamiento absoluto se basa en las coordenadas de la pantalla:

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

^ coloca el elemento en la parte superior izquierda de la ventana.


La posición relativa es relativa al lugar donde se coloca el elemento:

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

^ coloca el elemento 1px hacia abajo y 1px desde la izquierda de donde estaba originalmente :)

Damien-Wright
fuente
3

Relativo:

  1. Un elemento con position: relative;está posicionado en relación con su posición normal.

  2. Si no agrega atributos de posicionamiento (superior, izquierda, inferior o derecha) en un elemento relativo, no tendrá ningún efecto en su posicionamiento. Se comportará exactamente como un position: staticelemento.

  3. Pero si agrega algún otro atributo de posicionamiento, digamos, top: 10px ;, cambiará su posición 10 píxeles hacia abajo desde donde normalmente estaría.

  4. Un elemento con este tipo de posicionamiento se ve afectado por otros elementos y él mismo también afecta a otros.

Absoluto:

  1. Un elemento con le position: absolute;permite colocar cualquier elemento exactamente donde desea que esté. Utiliza los atributos de posicionamiento arriba, izquierda, abajo. y a la derecha para establecer la ubicación.

  2. Se coloca en relación con el antepasado no estático más cercano. Si no existe tal contenedor, se coloca en relación con la propia página.

  3. Se elimina del flujo normal de elementos en la página.

  4. Un elemento con este tipo de posicionamiento no se ve afectado por otros elementos y tampoco afecta el flujo de otros elementos.

Vea este ejemplo autoexplicativo para mayor claridad. https://codepen.io/nyctophiliac/pen/BJMqjX

Pransh Tiwari
fuente
0

Absolute coloca el objeto (div, span, etc.) en una ubicación forzada absoluta (generalmente determinada en píxeles) y relativo lo ubicará a cierta distancia de donde normalmente estaría su ubicación. Por ejemplo:

posición: relativa; izquierda: -20px;

Podría hacer que el lado izquierdo del texto desaparezca si estuviera dentro de los 20 px del borde izquierdo de la pantalla.

Charles Zink
fuente
0

position: absolute se puede colocar en cualquier lugar y permanecer allí, como 0,0.

position: relative se coloca con un desplazamiento de la ubicación en la que se colocó originalmente en el navegador.

Vil Ignoble
fuente
0

position: acto relativo como elemento padre position: acto absoluto hijo de posición relativa. puedes ver el siguiente ejemplo

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