Posición Relativa vs Absoluta?

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 sus necesidades y objetivos que uno utiliza. La posición "relativa" es adecuada cuando se desea desplazar un elemento de la posición que de otro modo tendría en el flujo de elementos, p. ej. para hacer que algunos caracteres aparezcan en una posición 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 posicionamiento "relativo" sin desplazamiento (solo ajuste position: relative) para hacer un elemento un marco de referencia, de modo que pueda usar 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 confine a un elemento padre, debe establecer la posición del elemento padre en relativo. Eso mantendrá el elemento hijo contenido dentro del elemento padre y no será "relativo" a toda la ventana.

Escribí una entrada de blog que da un ejemplo simple que crea el siguiente efecto:

Que tiene un div verde que está absolutamente posicionado en la parte inferior del padre yellow div.

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 or bottom, y left or right para mover el elemento en relación con el lugar donde normalmente ocurriría en el documento.

Posición Absoluta:

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

Aquí hay un buen tutorial http://www.barelyfitz.com/screencast/html-training/css/positioning / con el uso de la muestra de ambas posiciones con la respectiva posición absoluta y relativa.

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

Absoluto: Un elemento posicionado ABSOLUTO se posiciona en relación con SU PADRE POSICIONADO MÁS CERCANO. si uno está presente, entonces funciona como fijo.....relativa 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 posición del segundo padre div es relativa, por lo que el medio div cambiará su posición con respecto al segundo padre div. If 1st parent div position would relative then the Middle div would changes it's position with respect to 1st parent div. Detalles

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

Al configurar la página, de modo que mi pie de página siempre permanezca en la parte inferior, con la posición absoluta, y el contenedor/envoltura principal con la 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 establecer estos en absoluto, pie de página ya no se queda abajo.

El posticado es, como usted dice, un tema complejo.

Mi solución, al contenido que quería en 'absoluto' positon en mi página web, y no ser empujado a un lado, cuando en el ejemplo de apertura de un menú desplegable, era en realidad darle postition relativa, y ponerlo 35em debajo de mi menú desplegable. (35em es la altura de mi menú desplegable, cuando está completamente extendido)

Entonces, Arriba: - 35em, por el contenido que antes fue empujado a la lado. Y luego agregar margen-fondo: - 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, es con solo 10em margen, como lo era antes de empezar a jugar con esto. Así que 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 está bien respondida, pero después de muchos problemas encontré que esta es una muy buena solución, y una manera de entender mejor cómo el posicionamiento obrar.. Cuando coloco mi contenido de texto, debajo de mi menú desplegable, no empuja mi texto a un lado. Si cambiaba el texto a posición absoluta, el pie de página no se quedaba en su lugar. Como puedo creer que este es un problema para más personas que yo, añado esto aquí. Lo que de hecho sucede, es que pongo el texto, 35ems, debajo de mi menú desplegable.

Entonces, lo pongo visualmente al lado uno del otro, con la posición relativa, y la parte superior: - 35em;, y la noche fuera del enorme espacio de abajo, con margen: - 35em;

Los valores negativos se subestiman a veces, muy buena funcionalidad, cuando uno entiende 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 vista, si el texto o el contenido es más largo que la vista. Y para permanecer en la parte inferior, si hay poco contenido en la página.

Este setupp arregló eso muy bien, y recuerde usar 'em', no 'px' para una más fluida / dinámica diseño de página! :)

(puede haber mejores soluciones, pero esto funciona para mí plataformas cruzadas, así como dispositivos).

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, lo mejor es usar position: fixed

Vamos a discutir un escenario para explicar la diferencia entre absoluto vs relativo.

Dentro del elemento body, digamos que tiene un elemento header cuya altura es del 95% de viewheight, es decir, 95vh. Dentro de este contenedor colocaste una imagen y reduciste 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 de encabezado con un logotipo en la parte superior de la misma en el especificado posición.

Pero antes de comenzar esto, he establecido margin y padding en 0 como esto

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

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

Así que usted puede alcanzar su requisito de dos maneras.

Primera vía

• le das una clase a la imagen por ejemplo logo.

• En css escribes

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

• esto colocó el logotipo a los 40px de la parte superior e izquierda del padre que encierra que es el cabecera. La imagen aparecerá como si se colocara como se desea.

Pero mi amigo este es un mal diseño en cuanto a colocar una imagen que innecesariamente consumió mucho espacio alrededor dándole algún margen cuando no era necesario. Todo lo que necesitaba 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 profundo dando la impresión de que está posicionado exactamente donde querías. Espero que haya entendido el problema por trabajando así. Está ocupando más espacio del necesario para colocar solo una imagen en la ubicación deseada.

Ahora intentemos un enfoque diferente.

Segunda vía

• la imagen con clase logo está dentro del elemento header con, por ejemplo, clase header. Así que la clase padre es header y la clase hijo es logo como antes.

• Se establece la propiedad position de la clase header en relative like esto

  .header{ position: relative; }

• Luego agregó las siguientes propiedades a la clase logo

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

Ahí lo 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 tomado ningún espacio adicional. Ocupa exactamente la misma área tanto como su propio ancho y altura.

Entonces, ¿cómo es esto posible? Le dije a la clase image logo que se colocará relativo a la clase header ya que eres el hijo de esta clase y que mencioné específicamente su posición como relativo. Para que cualquier hijo de ella se colocará en relación a su esquina superior izquierda. Y que Su posición debe fijarse dentro de este elemento padre. así que se te da absoluto . Y que necesitas moverte un poco de arriba a la izquierda a la posición quiero que lo seas. Por lo tanto, se le da la propiedad superior e izquierda con 40px como valor. De esta manera usted será colocado en relación con su padre solamente. Así que si mañana muevo a tu padre hacia arriba o hacia abajo o en cualquier lugar, siempre estarás 40px en la parte superior e izquierda de la esquina superior izquierda del encabezado de tu padre. Por lo tanto, su posición es fija dentro de su padre, no importa si la posición de sus padres es fija o no en el futuro(ya que no es absoluta como usted).

Así que use relativo y absoluto para padre e hijo respectivamente. En segundo lugar, utilícelo cuando solo desee colocar el elemento hijo en alguna ubicación dentro de su elemento padre. No utilice rellenos como márgenes para empujarlo a la fuerza. Dé al padre el valor relativo y al hijo que desea mover, el valor absoluto. Especifique la propiedad superior, inferior izquierda o derecha en la clase hija para colocarla dentro del padre en cualquier lugar que desee.

Gracias.