Diferencia entre posicionamiento estático y relativo

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

El posicionamiento estático es el modelo de posicionamiento predeterminado para los elementos. Se muestran en la página donde se representan como parte del flujo normal de HTML. Los elementos posicionados estáticamente no obedecen las reglas left , top , right e bottom :

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

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

Los elementos relativamente posicionados obedecen al flujo HTML, pero proporcionan la capacidad de ajustar su posición relativa a su posición normal en el flujo HTML.

También hay un posicionamiento absoluto, por lo 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 extraen del flujo HTML y se pueden ubicar en un lugar específico del documento ...

Y cuando se aplica una position: relative a un elemento principal en la jerarquía:

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

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

Y finalmente está 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 extraen del flujo HTML, pero no están vinculados por la ventana gráfica y no se desplazarán con la página.

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

los elementos de posición fija no tienen efecto en el desplazamiento.

Mientras que los elementos absolutamente posicionados siguen siendo vinculados por la ventana gráfica y causarán desplazamiento:

los elementos absolutamente posicionados siguen siendo afectados por los límites de la ventana gráfica, a menos que se use el desbordamiento en un elemento principal.

… a menos que tu elemento padre use overflow: ? para determinar el comportamiento del desplazamiento (si lo hay).

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

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

Además, si recuerdo correctamente, al declarar un elemento relativo, permanecerá en el mismo lugar de lo normal, pero se obtiene la capacidad de posicionar elementos dentro de él de forma relativa a este elemento, lo que me ha resultado muy útil. en el pasado.

La posición relativa le permite usar arriba / abajo / izquierda / derecha para posicionar. Static no te permitirá hacer esto a menos que uses parámetros de margen. Hay una diferencia entre Top y margin-top.

No necesitará usar mucho estático ya que es el predeterminado

En respuesta a “por qué CSS todavía implementaría la posición: estático”; en una escena, usando 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, usar ‘ancho: automático’ no funciona con padres relativos. En este caso, cambiarlo a ‘estático’ permitirá que el ancho sea variable dependiendo del contenido dentro.

Pasé unas 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!

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

Matthew Abbott tiene una muy buena respuesta.

Los elementos de posición absoluta y relativa obedecen a top comandos top , left , right e bottom (desplazamientos) donde los elementos posicionados estáticos no lo hacen.

Los elementos relativamente posicionados mueven las compensaciones de donde normalmente estarían en el html.

Los elementos posicionados absolutos mueven las compensaciones del documento o el siguiente elemento relativamente posicionado al árbol DOM.

Estático: un elemento posicionado STATIC es lo que obtenemos por DEFAULT (posicionamiento normal de los objetos).

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