Diferencia entre style = “position: absolute” y style = “position: relative”

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

Estoy usando absolute este momento, pero también quiero explorar lo relative . ¿Cómo cambiará esto el posicionamiento?

El posicionamiento absoluto significa que el elemento se toma completamente fuera del flujo normal del diseño de la página. En lo que respecta al rest de los elementos en la página, el elemento absolutamente posicionado simplemente no existe. El elemento en sí se dibuja por separado, como “encima” de todo lo demás, en la posición que especifique utilizando los atributos left, right, top and bottom .

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 distinto de static (elementos de página predeterminados a estáticos cuando no se especifica ningún atributo de posición) o el cuerpo del documento ( vista del navegador) si no existe tal antecesor.

Por ejemplo, si tuviera este código:

  

… el

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

Sin embargo, si hice algo como esto:

  

… entonces el div inner estaría posicionado a 20px desde la parte superior del div outer , y 20px desde el borde izquierdo del mismo, porque el div outer no está posicionado con la position:static porque lo hemos configurado explícitamente para usar la position:relative .

El posicionamiento relativo, por otro lado, es como no indicar ningún posicionamiento, pero los atributos left, right, top and bottom “empujan” al elemento fuera de su distribución normal. El rest de los elementos en la página aún se distribuyen como si el elemento estuviera en su lugar normal.

Por ejemplo, si tuviera este código:

 Span1 Span2 Span3 

… entonces los tres elementos se sentarían uno al lado del otro sin superposición.

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

 Span1 Span2 Span3 

… entonces Span2 se superpondría al lado derecho de Span1 por 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 las cosas un poco.

Definitivamente querrá consultar este artículo de posicionamiento de A List Apart. Ayudé a desmitificar el posicionamiento de CSS (lo cual me pareció una locura, antes de este artículo).

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

Posicionamiento absoluto: un elemento busca los ejes de coordenadas disponibles más cercanos entre sus elementos principales. El elemento se posiciona luego al especificar desplazamientos desde este eje de coordenadas. Se eliminó del flujo normal del documento.

enter image description here

Fuente

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

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

Ambas Posiciones tienen características diferentes. En Css Una vez que estableces Posición, puedes usar atributos superiores, derechos, inferiores e izquierdos.

Posición Absoluta

Un elemento de posición absoluta se coloca en relación con el primer elemento principal que tiene una posición que no sea estática.

Posición relativa

Un elemento de posición relativa se coloca en relación con su posición normal.

Para posicionar un elemento de manera 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: Positivo Relativo vs Absoluto

El posicionamiento absoluto se basa en los coordinadores de la pantalla:

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

^ coloca el elemento superior izquierdo 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 abajo y 1px desde la izquierda de donde originalmente se sentó 🙂

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

Mire el ejemplo que creo para que usted muestre las diferencias …

enter image description here

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

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

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

Ambas Posiciones tienen características diferentes. En Css Una vez que estableces Posición, puedes usar atributos superiores, derechos, inferiores e izquierdos.

Posición Absoluta

Un elemento de posición absoluta se coloca en relación con el primer elemento principal que tiene una posición que no sea estática.

Posición relativa

Un elemento de posición relativa se coloca en relación con su posición normal.

Para posicionar un elemento de manera 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.

Relativo:

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

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

  3. Pero si agrega algún otro atributo de posicionamiento, por ejemplo, arriba: 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 también afecta a otros.

Absoluto:

  1. Un elemento con position: absolute; te permite colocar cualquier elemento exactamente donde quieras que esté. Usas los atributos de posicionamiento arriba, izquierda, abajo. y derecho a establecer la ubicación.

  2. Se coloca con relación al antecesor no estático más cercano. Si no hay tal contenedor, se coloca en relación con la página en sí.

  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 una mejor claridad. https://codepen.io/nyctophiliac/pen/BJMqjX

Absoluto coloca el objeto (div, span, etc.) en una ubicación forzada absoluta (generalmente determinada en píxeles) y relativa lo colocará una cierta cantidad lejos de donde sería normalmente su ubicación. Por ejemplo:

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

Podría hacer desaparecer el lado izquierdo del texto si estaba dentro de 20 píxeles hacia el borde izquierdo de la pantalla.

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

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