A veces, cuando hacemos que nuestra página web responda, usamos la propiedad de posición de CSS y dedicamos mucho tiempo a resolver problemas en el posicionamiento de elementos en nuestro sitio web.
Hoy vamos a ver la propiedad position y sus diferentes valores en CSS.
¿Qué es la propiedad de posición en CSS?
La propiedad position especifica el tipo de método de posicionamiento utilizado para un elemento (estático, relativo, absoluto, fijo o fijo). De forma predeterminada para cada elemento, la propiedad de posición se establece en estático.
Hay 5 propiedades de posicionamiento en CSS:
- Estático
- Absoluto
- Relativo
- Reparado
- Pegajoso
Estático:
Es el valor predeterminado de la propiedad de posición. El elemento se representa en orden de colocación. No interrumpe el flujo del documento. El atributo arriba/izquierda/abajo/derecha no funciona con la propiedad de posición estática.
Ventaja: Se escalará en todos los navegadores.
Absoluto:
El elemento se elimina del flujo normal del documento. Otros elementos se comportarán como si ni siquiera estuvieran en el documento. Toda la propiedad de posición funcionará. Los elementos de posición absoluta son relativos a su elemento principal.
Ventaja: Use when para colocar el elemento de acuerdo con el elemento principal.
Relativo:
El elemento se coloca en relación con su posición normal. Actúa como un elemento estático. Ahora, el atributo arriba/izquierda/abajo/derecha funcionará en el elemento. Se utiliza principalmente para los elementos principales.
Ventaja: Úselo para el elemento principal de un elemento con posición absoluta.
Reparado:
El elemento de posición fija es lo mismo que la posición absoluta. Se eliminan del flujo normal del documento. Pero a diferencia de los elementos de posición absoluta, siempre son relativos a la etiqueta HTML.
Ventaja: Úselo cuando desee que el encabezado se fije en la parte superior de la ventana gráfica.
Pegajoso:
La posición pegajosa es única. Se comporta según scroll. Si se desplaza más allá del elemento, se mantendrá en la posición. Después de eso, funcionará como un elemento fijo.
Ventaja: Cuando desee que algo se mantenga después de un cierto clic, como Comprar ahora, inicie sesión.
Conclusión:
Espero que ahora pueda colocar el elemento de acuerdo con sus necesidades sin mucha frustración. Gracias, estás leyendo la publicación del blog. y espero que no te quede claro Propiedades de posicionamiento en CSS