¿Posición relativa versus absoluta?
¿ Cuál es la diferencia entre position: relativey position: absoluteen CSS? ¿Y cuándo deberías usarlos?
Posicionamiento CSS absoluto
position: absolute;
El posicionamiento absoluto es el más fácil de entender. Comienzas con la positionpropiedad CSS:
position: absolute;
Esto le dice al navegador que cualquier cosa que se vaya a colocar debe eliminarse del flujo normal del documento y se colocará en una ubicación exacta de la página. No afectará la forma en que se colocan los elementos anteriores o posteriores en el HTML 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, debe usar 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 a través, debajo o sobre el elemento (visualmente).
Las cuatro propiedades de posicionamiento son:
toprightbottomleft
Para usarlos, debes considerarlos como propiedades de compensación. 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 al padre) por 2px. Lo mismo ocurre con los otros tres.
Posicionamiento relativo
position: relative;
El posicionamiento relativo utiliza las mismas cuatro propiedades de posicionamiento que absoluteel posicionamiento. 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 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 de la ventana de visualización.
Párrafo 1.
Párrafo 2.
Párrafo 3. En el ejemplo anterior, el tercer párrafo se ubicará3emdesde 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 solo se desplazaría ligeramente. Si lo cambiara a position: absolute;, todo lo que le siguiera se mostraría encima, porque ya no estaría en el flujo normal del documento.
Notas:
El valor predeterminado
widthde un elemento que está en posición absoluta es el ancho del contenido que contiene, a diferencia de un elemento que está en posición relativa donde el valor predeterminadowidthes100%el 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/posicionamiento negativos).
lotes extraídos de: este recurso
Tanto el posicionamiento “relativo” como el “absoluto” son realmente relativos, sólo 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 tendría el propio elemento sin posicionamiento.
Depende de tus necesidades y objetivos cuál utilices. 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 algún texto.
Como especial, use el posicionamiento "relativo" sin desplazamiento (solo configurando position: relative) para hacer de un elemento un marco de referencia, de modo que pueda usar el posicionamiento "absoluto" para los elementos que están dentro de él (en el marcado).
Otra cosa a tener en cuenta es que si desea que un elemento absoluto se limite a un elemento principal, debe establecer la posición del elemento principal en relativa. Eso mantendrá el elemento secundario contenido dentro del elemento principal y no será "relativo" a toda la ventana.
Escribí una publicación de blog que ofrece un ejemplo simple que crea el siguiente efecto:
Tiene un div verde que está absolutamente posicionado 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/
Relativo de posición:
Si especifica posición: relativa, puede usar arriba o abajo, izquierda o derecha para mover el elemento en relación con el lugar donde normalmente aparecería en el documento.
Posición absoluta:
Cuando especifica la posición: absoluta, el elemento se elimina del documento y se coloca exactamente donde usted le indica que vaya.
Estos son de http://www.barelyfitz.com/screencast/html-training/css/positioning/ con el uso de muestra de ambas posiciones con respecto al posicionamiento absoluto y relativo.
Relativo: relativo a su posición actual, pero se puede mover. O UN elemento posicionado RELATIVAMENTE está posicionado en relación a SÍ MISMO.
Absoluto: un elemento posicionado ABSOLUTO se coloca en relación con SU PADRE POSICIONADO MÁS CERCANO. si hay uno 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í, divla posición del segundo padre es relativa, por lo que el medio divcambiará su posición con respecto al segundo padre div. Si divla posición del primer padre fuera relativa, entonces el medio divcambiaría su posición con respecto al primer padre div. Detalles
