css - posicionar - Posición relativa vs Posición Absoluta?

posicionar div css

Question

¿Cuál es la diferencia entre la posición relativa y la posición absoluta y cuándo usar cuál en css?

Answer 1

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

Si necesita posicionar el elemento en el punto de vista de la ventana del navegador, es mejor usar la posición: fijo

Answer 2

Otra cosa a tener en cuenta es que si quieres que un elemento absoluto esté confinado a un elemento padre, entonces debes 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 publicación de blog que proporciona un ejemplo simple que crea el siguiente efecto:

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

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

Answer 3

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, tuvo algunos problemas tanto con el pie de página como con 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 principal / envoltorio con la posición relativa.

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

La postulación es, como dices un tema complejo.

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

Luego, Top: -35em, por el contenido que antes fue empujado hacia un lado. Y luego agregando margen inferior: -35em. De esta forma, el contenido está "debajo" de mi menú desplegable, ¡pero visualmente está al lado de mi menú desplegable! Y el espacio en blanco abajo hasta el pie de página, es con solo 10em margen, como lo fue antes de empezar 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 tu pregunta fue respondida bien, pero después de muchos problemas encontré que esta era 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. t empuje mi texto hacia 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, lo agrego aquí. Lo que de hecho ocurre, es poner el texto, 35ems, debajo de mi menú desplegable.

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

a veces se subestiman los valores negativos, muy buena funcionalidad, ¡cuando se comprenden 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 contenido es más largo que la ventana gráfica. Y para permanecer en la parte inferior, si hay poco contenido en la página.

¡Esta configuración lo solucionó muy bien, y recuerda 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í, plataformas cruzadas, así como dispositivos).

Answer 4

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 circundante. El posicionamiento "relativo" es relativo a la posición que tendría el elemento sin posicionamiento.

Depende de tus necesidades y objetivos cuál utilizas. 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 hacer 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 texto.

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

Answer 5

Posición relativa:

Si especifica la posición: relativa, puede usar la parte superior o inferior, y la izquierda o la derecha para mover el elemento relativo a donde normalmente ocurriría en el documento.

Posición Absoluta:

Cuando especifica position: absolute, el elemento se elimina del documento y se coloca exactamente donde usted dice 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 respecto al posicionamiento absoluto y relativo.

Answer 6

Posicionamiento CSS absoluto

position: absolute;

El posicionamiento absoluto es el más fácil de entender. Empiezas con la propiedad de position 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 posición de los elementos anteriores o posteriores en el HTML en la página web; sin embargo, estará sujeto al posicionamiento 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, debe usar el desplazamiento top para colocarlo allí con absolute posicionamiento absolute :

position: absolute;
top: 10px;

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

Las cuatro propiedades de posicionamiento son:

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

Para usarlos, debe considerarlos como propiedades de compensación. En otras palabras, un elemento colocado a la right: 2px no se mueve a la derecha 2px . Su lado derecho está desplazado desde el lado derecho de la ventana (o su posición sobrepasando al principal) en 2px . Lo mismo es cierto para los otros tres.

Posicionamiento relativo

position: relative;

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

Por ejemplo, si tiene tres párrafos en su página web, y el tercero tiene una position: relative estilo position: relative colocado en él, su posición se compensará en función de su ubicación actual, no de los lados originales del puerto de visualización.

Párrafo 1.

Párrafo 2.

Párrafo 3. En el ejemplo anterior, el tercer párrafo se colocará 3em desde el lado izquierdo del elemento contenedor, pero aún estará debajo de los dos primeros párrafos. Permanecería en el flujo normal del documento y se compensaría ligeramente. Si lo cambió a la position: absolute; , todo lo que le sigue se mostraría encima, porque ya no estaría en el flujo normal del documento.

Notas:

• el width predeterminado de 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 width predeterminado es el 100% del espacio que puede llenar.

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

lotes extraídos de: este recurso

Answer 7

Relativo: relativo a su posición actual, pero puede moverse. O un elemento posicionado RELATIVO está posicionado en relación con SÍ MISMO.

Absoluto: un elemento posicionado ABSOLUTO se coloca en relación con EL PADRE EN POSICIONAMIENTO MÁS CERCANO. si uno está presente, entonces funciona como fijo ..... en relación con 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 div medio cambiará su posición con respecto al segundo padre div . Si la posición div primer padre sería relativa, entonces el div medio cambiaría su posición con respecto al primer div . Details