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 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:

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:

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 :

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

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:

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:

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

.. 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.

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.

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!

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

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.

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.

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.

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.