Posición Css
En este artículo se utiliza el término «imagen» para indicar cualquier contenido que se pueda posicionar. El artículo también utilizará el término «div» para referirse a cualquier contenedor HTML que pueda ser posicionado, que generalmente es una etiqueta div pero también puede ser p u otra etiqueta que pueda contener contenido.
La imagen fija puede posicionarse en relación con los bordes de cualquier esquina de la ventana. Los bordes son arriba, izquierda, derecha y abajo. Las esquinas son superior e izquierda, superior y derecha, inferior e izquierda, e inferior y derecha. Especificando una distancia desde los dos bordes de cualquier esquina, la imagen puede posicionarse exactamente en cualquier lugar de la ventana.
La imagen de posición fija puede sangrar (término de la imprenta para las partes impresas que se recortan) utilizando un valor negativo al posicionarla. Para una página web, «sangrado» significa que parte de la imagen está más allá del borde de la ventana y se corta.
Este método colocará una imagen en la página web en la posición exacta respecto a la parte superior izquierda de la página o respecto a otro div posicionado. La imagen se elimina del flujo de contenido normal de la página web.
Css posición inferior
El siguiente código HTML-CSS coloca una imagen encima de otra creando un div relativo que se coloca en el flujo de la página. Luego se coloca la imagen de fondo primero como relativa para que el div sepa el tamaño que debe tener. Lo siguiente es colocar la imagen superpuesta como absoluta relativa a la parte superior izquierda de la primera imagen.
position: relative – En el método de posición relativa, puedes posicionar el elemento en relación a su posición normal. En este caso debes usar izquierda o derecha y arriba o abajo para mover el elemento en relación a su contenedor.
Cuando se superponen elementos CSS, al utilizar la posición absoluta y relativa, el comportamiento por defecto es tener los primeros elementos debajo de los posteriores. En estos casos podemos controlar la superposición de elementos posicionados utilizando la propiedad z-index . Al utilizar la propiedad z-index se puede especificar cuál de las cajas aparece encima de la otra.
Posición css: relativa al padre
Cada vez que trabajo en un componente que necesita posicionamiento absoluto, me pregunto: ¿es realmente necesario? Empecé a notar algunos casos de uso en los que el uso de position: absolute no es necesario. Esto me pareció interesante y pensé en documentar los casos de uso que suelo encontrar mientras trabajo en proyectos de front-end.
Si nos remontamos 5 años atrás en el tiempo, CSS flexbox era todavía nuevo y no se podía utilizar con un fallback adecuado. CSS grid ni siquiera era soportado en ese entonces. Eventualmente, usaríamos el posicionamiento CSS para lograr el diseño deseado. Sin embargo, algunos de estos casos de uso pueden ser resueltos con CSS flexbox o grid hoy en día.
El otro día, estábamos trabajando en el desarrollo del front-end de una página de aterrizaje, y mi compañera me preguntó acerca de un problema de diseño que estaba enfrentando. El problema se debía a position: absolute, así que intervine y traté de ayudarla, y lo solucionamos sin siquiera usar posicionamiento CSS. En ese momento, me di cuenta de que debía documentar eso, y eso es lo que estoy haciendo ahora.
Css position: absolute
Me viene a la mente la propiedad CSS clip, pero no creo que sea posible conseguir un cuadrado centrado con ella sin conocer las dimensiones de la imagen. La forma más limpia sería probablemente averiguar las dimensiones de la miniatura en el lado del servidor, y luego aplicar un clip con valores absolutos de píxeles en él para que se convierta en cuadrado.
Asumiendo que obtener las dimensiones de la imagen no es una opción (deduzco que no estarías preguntando si lo fuera), se me ocurre una idea de solución. No puedo construir un caso de prueba ahora mismo, pero algo en esta dirección podría funcionar: