Solución:
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. Los elementos posicionados estáticamente no obedecen left, top, right y bottom normas:
El posicionamiento relativo le permite especificar un desplazamiento específico (left, top etc) que es relativa 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 en relación con donde normalmente se colocaría dentro del div:
También existe un posicionamiento absoluto, en el que se 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 un position: relative se aplica 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 consideran vinculados 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 scroll (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 recuerdo correctamente, 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é unas cuantas 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!