Diferencia entre posicionamiento estático y relativo


89

En CSS, ¿cuál es la diferencia entre el posicionamiento estático (predeterminado) y el posicionamiento relativo?


21
Una diferencia es que escribe con frecuencia position: relativey nunca escribe position: static:)
thirtydot

Respuestas:


168

El posicionamiento estático es el modelo de posicionamiento predeterminado para elementos. Se muestran en la página donde se representan como parte del flujo HTML normal. Elementos posicionados de forma estática no obedecen left, top, righty bottomreglas:

Los elementos posicionados estáticamente obedecen al flujo HTML normal.

El posicionamiento relativo le permite especificar un desplazamiento específico ( left, topetc.) que es relativo a la posición normal del elemento en el flujo HTML. Entonces, si tengo un cuadro de texto dentro de un div, podría aplicar un posicionamiento relativo en el cuadro de texto para que se muestre en un lugar específico con respecto a donde normalmente se colocaría dentro de div:

Los elementos en una posición relativa obedecen al flujo HTML, pero ofrecen la posibilidad de ajustar su posición en relación con su posición normal en el flujo HTML.

También hay un posicionamiento absoluto, en el que especifica la ubicación exacta del elemento en relación con todo el documento, o el siguiente elemento relativamente posicionado más arriba en el árbol de elementos :

Los elementos absolutamente posicionados se eliminan del flujo HTML y se pueden colocar en un lugar específico del documento ...

Y cuando position: relativese aplica a a un elemento padre en la jerarquía:

... o posicionado con relación al primer elemento padre en el árbol HTML que está relativamente posicionado.

Observe cómo nuestro elemento de posición absoluta está vinculado por el elemento de posición relativa.

Y por último hay arreglado. El posicionamiento fijo restringe un elemento a una posición específica en la ventana gráfica, que permanece en su lugar durante el desplazamiento:

Los elementos de posición fija también se eliminan del flujo HTML, pero no están limitados por la ventana gráfica y no se desplazarán con la página.

También puede observar el comportamiento de que los elementos de posición fija no causan desplazamiento porque no se considera que estén limitados por la ventana gráfica:

Los elementos de posición fija no tienen efecto sobre el desplazamiento.

Considerando que los elementos absolutamente posicionados todavía están vinculados por la ventana gráfica y causarán desplazamiento:

Los elementos absolutamente posicionados todavía se ven afectados por los límites de la ventana gráfica, a menos que se utilice el desbordamiento en un elemento principal.

.. a menos, por supuesto, que su elemento padre utilice overflow: ?para determinar el comportamiento del desplazamiento (si lo hay).

Con posicionamiento absoluto y posicionamiento fijo, los elementos se eliminan del flujo HTML.


4
Buena respuesta, pero (para la posición relativa) ¿no se basa el desplazamiento en la posición normal del elemento?
Baztoune

4
Estoy de acuerdo con Baztoune, esta definición de elementos relativamente posicionados es engañosa. A staticy el relativeelemento son lo mismo, excepto que con este último puede reposicionarlo en relación con su posición original , no con el elemento que lo contiene; ahí es donde absoluteentra en juego. Además, como cualquier elemento posicionado usando un valor diferente al staticque puede usar z-index.
Ryan Williams

He reelaborado esta respuesta para definir con mayor precisión el posicionamiento relativo e incluí imágenes para demostrar los diferentes tipos de posición.
Matthew Abbott

3
Me pregunto por qué CSS aún se implementaría en position: static;lugar de simplemente reemplazarlo position: relative;por defecto. Si uno no quiere colocar otro elemento que no sea top: 0;y left: 0;entonces no lo hagamos, ¿verdad? ¿Existe una razón subyacente por la que position: static;todavía se requiere como parte de CSS?
cram2208

8
@ cram2208 debido a que relativo hace que los nodos de posición absoluta de los niños se coloquen en relación con ellos, static permite que los niños de posición absoluta ignoren su posición y se coloquen en relación con el elemento de posición relativa más cercano. Es un concepto importante para tener
Felype

7

Puede ver una descripción general simple aquí: W3School

Además, si mal no recuerdo, al declarar un elemento relativo, de forma predeterminada permanecerá en el mismo lugar que debería, pero obtienes la capacidad de colocar absolutamente elementos dentro de él en relación con este elemento, lo que he encontrado muy útil en el pasado.


29
w3schools ... No rechazaré esto, pero debes vivir con la vergüenza.
Myles Gray

4
Mientras tanto, en 2017, W3Schools no es tan malo como solía ser (todavía no es perfecto, pero se tomaron en serio la reacción de la comunidad y de hecho mejoraron).
Priidu Neemre

Mientras tanto, en 2018, W3Schools todavía no es tan malo como solía ser, pero me siento mal por ellos porque su reputación incluso hoy en día sigue siendo tal que mencionar el primer comentario anterior a otros desarrolladores, todavía tiene una risa clásica ... en mi día ... W3School .... primeras impresiones hey ...
redfox05

7

En respuesta a "por qué CSS aún implementaría position: static;" en un escenario, el uso de posición: relativa para un padre y posición: absoluta para el niño limita el ancho de escala del niño. En un sistema de menú horizontal, donde podría tener 'columnas' de enlaces, el uso de 'width: auto' no funciona con los padres relativos. En este caso, cambiarlo a 'estático' permitirá que el ancho sea variable dependiendo del contenido dentro.

Pasé algunas horas preguntándome por qué no podía hacer que mi contenedor se ajustara en función de la cantidad de contenido que contenía. ¡Espero que esto ayude!


¡Esta es la respuesta! Todo el mundo le dice a los profesionales solo por el posicionamiento relativo, perdiendo el punto en una pregunta como esta: cuál es la diferencia.
Bartis Áron

5

Posición relativa le permite utilizar la parte superior / inferior / izquierda / derecha para el posicionamiento. Static no le permitirá hacer esto a menos que use parámetros de margen. Hay una diferencia entre Top y margin-top.

No necesitará usar estática tanto como es predeterminada


2

La posición relativa es relativa al flujo normal. La posición relativa de ese elemento (con compensaciones) es relativa a la posición donde ese elemento habría estado normalmente si no se hubiera movido.


2

Matthew Abbott tiene una muy buena respuesta.

Absoluta y artículos posicionado en relación obedecen top, left, righty bottomcomandos (offsets), donde elementos estáticos posicionado no lo hacen.

Los elementos en una posición relativa mueven las compensaciones desde donde normalmente estarían en el html.

Los elementos de posición absoluta mueven las compensaciones del documento o del siguiente elemento de posición relativa hacia arriba en el árbol DOM.


0

Estático: Un elemento posicionado ESTÁTICO es lo que obtenemos por DEFAULT (Posicionamiento normal de objetos).

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


0

estático y relativo son atributos de posición. Relativo se utiliza para muchos usos. No para uno. Pero tenga en cuenta que estático y relativo no dañan el flujo normal de documentos del Html. static es la posición predeterminada que cuando escribe cualquier elemento en Html. Si un elemento tiene una posición relativa, ese elemento se puede colocar en relación con su lugar original. cuando desee ajustar el elemento desde espacios pequeños, use la posición relativa para que no necesite agregar el margen, el relleno, etc. si el elemento tiene una posición relativa y tiene un elemento secundario. Aquí podemos hacer mediciones en relación con su padre. Si agrega ancho 10% al niño, eso significa (ancho + relleno) x10%. Pero no agrega la palabra clave relativa, obtiene anchox10%. Aparte de eso, el uso más importante del pariente es; puede colocar cualquier elemento en la parte superior.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.