css - posicionar - Diferencia entre posicionamiento estático y relativo
posicionar imagen css (7)
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 :
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 :
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 :
Y cuando se aplica una position: relative a un elemento principal en la jerarquía:
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:
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:
Mientras que los elementos absolutamente posicionados siguen siendo vinculados por la ventana gráfica y causarán desplazamiento:
... 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.
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.
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
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.
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.