¿Posición relativa vs absoluta?

¿Cuál es la diferencia entre position: relativey position: absoluteen CSS? ¿Y cuándo deberías usar cuál?

Posicionamiento absoluto de CSS

position: absolute;

El posicionamiento absoluto es el más fácil de entender. Empiezas con la positionpropiedad CSS :

position: absolute;

Esto le dice al navegador que lo que se va a colocar debe eliminarse del flujo normal del documento y se colocará en una ubicación exacta en la página. No afectará la forma en que los elementos anteriores o posteriores en el HTML se colocan en la página web, sin embargo, estará sujeto a la posición de sus padres a menos que lo anule.

Si desea colocar un elemento a 10 píxeles de la parte superior de la ventana del documento, usaría el topdesplazamiento positionallí con absoluteposicionamiento:

position: absolute;
top: 10px;

Este elemento siempre se mostrará 10pxdesde la parte superior de la página, independientemente del contenido que pase por, debajo o sobre el elemento (visualmente).

Las cuatro propiedades de posicionamiento son:

1. top
2. right
3. bottom
4. left

Para usarlos, debe pensar en ellos como propiedades de desplazamiento. En otras palabras, un elemento posicionado right: 2pxno se mueve hacia la derecha 2px. Su lado derecho está desplazado del lado derecho de la ventana (o su posición anulando el padre) por 2px. Lo mismo es cierto para los otros tres.

Posicionamiento Relativo

position: relative;

El posicionamiento relativo utiliza las mismas cuatro propiedades de absoluteposicionamiento que el posicionamiento. Pero en lugar de basar la posición del elemento en el puerto de vista del navegador, comienza desde donde estaría el elemento si todavía estuviera en el flujo normal .

Por ejemplo, si tiene tres párrafos en su página web y el tercero tiene un position: relativeestilo, su posición se desplazará según su ubicación actual, no desde los lados originales del puerto de vista.

Párrafo 1.

Párrafo 2.

Notas:

• El valor predeterminado widthde un elemento que está absolutamente posicionado es el ancho del contenido dentro de él, a diferencia de un elemento que está relativamente posicionado donde su valor predeterminado widthes 100%el espacio que puede llenar.

• Puede tener elementos que se superpongan con elementos posicionados absolutamente, mientras que no puede hacerlo con elementos relativamente posicionados (de forma nativa, es decir, sin el uso de márgenes negativos / posicionamiento)

lotes extraídos de: este recurso

Tanto el posicionamiento "relativo" como el "absoluto" son realmente relativos, solo que con un marco diferente. El posicionamiento "absoluto" es relativo a la posición de otro elemento envolvente. El posicionamiento "relativo" es relativo a la posición que el elemento mismo tendría sin posicionamiento.

Depende de tus necesidades y objetivos cuál uses. La posición "relativa" es adecuada cuando desea desplazar un elemento de la posición que de otro modo tendría en el flujo de elementos, por ejemplo, para que algunos caracteres aparezcan en una posición de superíndice. El posicionamiento "absoluto" es adecuado para colocar un elemento en algún sistema de coordenadas establecido por otro elemento, por ejemplo, para "sobreimprimir" una imagen con algún texto.

Como especial, use el posicionamiento "relativo" sin desplazamiento (solo ajuste position: relative) para hacer que un elemento sea un marco de referencia, de modo que pueda usar el posicionamiento "absoluto" para los elementos que están dentro de él (en marcado).

Otra cosa a tener en cuenta es que si desea que un elemento absoluto se limite a un elemento primario, entonces debe establecer la posición del elemento primario como relativa. Eso mantendrá el elemento hijo contenido dentro del elemento padre y no será "relativo" a toda la ventana.

Escribí una publicación de blog que da un ejemplo simple que crea el siguiente efecto:

Eso tiene un div verde que está absolutamente ubicado en la parte inferior del div amarillo principal.

1 http://blog.troygrosfield.com/2013/02/11/working-with-css-positions-creating-a-simple-progress-bar/

Posición relativa:

Si especifica position: relative, puede usar top o bottom, y left o right para mover el elemento en relación con el lugar donde normalmente se produciría en el documento.

Posición absoluta:

Cuando especifica position: absolute, el elemento se elimina del documento y se coloca exactamente donde le indica que vaya.

Aquí hay un buen tutorial http://www.barelyfitz.com/screencast/html-training/css/positioning/ con el uso de muestra de ambas posiciones con posicionamiento respectivo a absoluto y relativo.

Relativo: Relativo a su posición actual, pero se puede mover. O un elemento posicionado RELATIVO se posiciona en relación a SÍ MISMO.

Absoluto: un elemento posicionado ABSOLUTO se posiciona en relación con el PADRE POSICIONADO MÁS CERCANO. si hay uno presente, entonces funciona como fijo ..... relativo a la ventana.

<div style="position:relative"> <!--2nd parent div-->
    <div>   <!--1st parent div-->
        <div style="position:absolute;left:10px;....."> <!--Middle div-->
          Md. Arif
       </div>
    </div>
</div>

Aquí, la divposición del segundo padre es relativa, por lo que el medio divcambiará su posición con respecto al segundo padre div. Si la divposición del primer padre sería relativa, el Medio divcambiaría su posición con respecto al primer padre div. Detalles

Poniendo una respuesta, ya que mi reputación no es suficiente para comentar. Pero no mire esto como una respuesta, solo una información adicional, como yo, tuve algunos problemas con el pie de página y el posicionamiento.

Al configurar la página, para que mi pie de página permanezca siempre en la parte inferior, con posición absoluta, y contenedor / envoltorio principal con posición relativa.

Luego encontré algunos problemas con mi contenido de texto y un menú dentro del mismo contenido (parte blanca de la página entre el encabezado y el pie de página), cuando los configuré en absoluto, el pie de página ya no se mantiene abajo.

Publicar es, como usted dice, un tema complejo.

Mi solución, para el contenido que quería en la posición 'absoluta' en mi página web, y que no me dejara de lado, cuando, por ejemplo, abría un menú desplegable, era darle una posición relativa y colocarla 35em debajo de mi menú desplegable menú. (35em es la altura de mi menú desplegable, cuando está completamente extendido)

Luego, Arriba: -35em, para el contenido que antes se empujó a un lado. Y luego agregando margen inferior: -35em. De esta manera, el contenido está "debajo" de mi menú desplegable, pero visualmente está al lado de mi menú desplegable. Y el espacio en blanco debajo del pie de página, tiene un margen de solo 10em, como era antes de comenzar a jugar con esto. Entonces mi solución a esto fue así:

 html, body {
    margin:0;
    padding:0;
    height:100%;

}
h1 {
    margin:0;
}
    #webpage {
    position:relative;
    min-height:100%;
    margin:0;
    overflow:auto;
}
     #header {
    height:5em;
    width:100%;
    padding:0;
    margin:0;
}
     #text {
    position:relative;
   margin-bottom:-32em;
    padding-top:2em;
    padding-right:2em;
    padding-bottom:10em;
    background-repeat:no-repeat;
    width:70%;
    padding-left:auto;
    margin-left:auto;
    margin-right:auto;
    right:10em;
    float:right;
    top:-32em;
      }
#dropdown {

position:absolute;
    left:0;
    width:20%;
    clear:both;
    display:block;
    position:relative;
    top:1em;
    height:35em;

}
    #footer {
    position:absolute;
    width:100%;
    right:0;
    bottom:0;
    height:5em;
    margin:0;
     margin-top:5em;
}

Veo que su pregunta se responde bien, pero después de muchos problemas, encontré que esta es una muy buena solución, y una forma de entender mejor cómo funciona el posicionamiento. Cuando coloco el contenido de mi texto, debajo de mi menú desplegable, no funciona. No empuje mi texto a un lado. Si cambié el texto a la posición absoluta, el pie de página no se mantuvo en su lugar. Como puedo creer que este es un problema para más personas que yo, agrego esto aquí. Lo que de hecho sucede es que pongo el texto, 35ems, debajo de mi menú desplegable.

Luego, visualmente lo puse uno al lado del otro, con una posición relativa, y arriba: -35em ;, y igualando el enorme espacio de abajo, con margen: -35em;

Los valores negativos se subestiman a veces, muy buena funcionalidad, cuando uno comprende mejor estas posiciones.

Naturalmente, la posición fija también parecía lógica para mi pie de página, pero realmente quiero que el pie de página vaya debajo de la ventana gráfica, si el texto o el contenido es más largo que la ventana gráfica. Y para mantenerse en la parte inferior, si hay poco contenido en la página.

¡Este setupp lo solucionó muy bien, y recuerde usar 'em', no 'px' para un diseño de página más fluido / dinámico! :)

(Puede haber mejores soluciones, pero esto funciona para mí multiplataforma, así como dispositivos).

Relativo vs absoluto:

• Diferencia: relativa a sí misma, relativa al ancestro posicionado más cercano.
• Diferencia: Otros elementos a su alrededor honran su antigua existencia, Otros elementos a su alrededor NO honran su antigua existencia.
• Similitud: Otros elementos a su alrededor NO honran su nueva existencia, Otros elementos a su alrededor NO honran su nueva existencia.

Analicemos un escenario para explicar la diferencia entre lo absoluto y lo relativo.

Dentro del elemento del cuerpo dice que tiene un elemento de encabezado cuya altura es del 95% de la altura de la vista, es decir, 95vh. Dentro de este contenedor colocaste una imagen y redujiste su opacidad para decir 0.5. Y ahora desea colocar una imagen de logotipo cerca de la esquina superior izquierda. Espero que hayas entendido el escenario. Por lo tanto, tendrá una imagen más clara en la sección del encabezado con un logotipo en la parte superior en la posición especificada.

Pero antes de comenzar esto, establecí el margen y el relleno en 0 como este

*{
   margin:0px;
   padding:0px;
   box-sizing: border-box; 
}

Esto garantiza que no se apliquen márgenes predeterminados y que se aplique relleno a los elementos.

Para que pueda cumplir su requisito de dos maneras.

Primera forma

• le das una clase a la imagen que dice logo.

• en css escribes

  .logo{ float:left; margin-top:40px; margin-left:40px; }

• Esto colocó el logotipo a 40 píxeles desde la parte superior e izquierda del elemento primario adjunto, que es el encabezado. La imagen aparecerá como si estuviera colocada como se desea.

Pero mi amigo, este es un mal diseño para colocar una imagen que innecesariamente consumiste tanto espacio dando un margen cuando no era necesario. Todo lo que necesita es colocar la imagen en esa ubicación. Lo lograste amortiguándolo con márgenes alrededor. El margen tomó espacio y empujó su contenido más profundamente, dando la impresión de que está posicionado exactamente donde deseaba. Espero que hayas entendido el problema resolviéndolo así. Está ocupando más espacio del necesario para colocar solo una imagen en la ubicación deseada.

Ahora intentemos un enfoque diferente.

Segunda forma

• la imagen con la clase de logotipo está dentro del elemento de encabezado con dicha clase de encabezado. Entonces, la clase principal es el encabezado y la clase secundaria es el logotipo como antes.

• configura la propiedad de posición de la clase de encabezado como relativa de esta manera

  .header{ position: relative; }

• luego agregó las siguientes propiedades a la clase de logotipo

  .logo{ position:absolute; top:40px; left:40px }

Ahí tienes. Colocaste la imagen exactamente en el mismo lugar. No habrá ninguna diferencia aparente en el posicionamiento a simple vista entre el primer enfoque y el segundo enfoque. Pero si inspecciona el elemento de imagen, encontrará que no ha ocupado ningún espacio adicional. Ocupa exactamente la misma área que su propio ancho y alto.

Como es esto posible? Le dije a la clase de logotipo de imagen que se lo colocará en relación con la clase de encabezado como hijo de esta clase y que mencioné específicamente su posición como relativa . De modo que cualquier hijo de ella se colocará en relación con su esquina superior izquierda. Y que su posición necesita ser arreglada dentro de este elemento padre. entonces te dan absoluta. Y que necesitas moverte un poco desde la parte superior e izquierda a la posición que quiero que estés. Por lo tanto, se le otorgan propiedades superior e izquierda con 40 px como valor. De esta manera, solo se lo ubicará en relación con sus padres. Entonces, si mañana muevo a tus padres hacia arriba o hacia abajo o solo a cualquier lugar, siempre estarás 40 px en la parte superior e izquierda de la esquina superior izquierda del encabezado de tus padres. Por lo tanto, su posición está fija dentro de su padre, sin importar si la posición de su padre está fija o no en el futuro (ya que no es absoluta como usted).

Entonces use relativo y absoluto para padre e hijo respectivamente. En segundo lugar, úselo cuando solo desee colocar el elemento hijo en alguna ubicación dentro de su elemento padre. No use rellenos como márgenes para empujarlo a la fuerza. Proporcione el valor relativo primario y secundario que desea mover, el valor absoluto. Especifique la propiedad superior, inferior izquierda o derecha de la clase secundaria para ubicarla dentro del elemento primario donde desee.

Gracias.

Marco Pellicciotta: La posición del elemento dentro de otro elemento puede ser relativa o absoluta, sobre el elemento que está dentro.

Si necesita colocar el elemento en el punto de vista de la ventana del navegador, es mejor usar position: fixed