¿Qué posicionamiento css se ha usado?

A todos los aprendices de css nos encanta el momento en el que empezamos a mover cajas arriba y abajo o incluso a superponerlas unas sobre otras.

Sin embargo es complicado encontrar ejercicios para corroborar que aquello que pensamos es correcto.

Este ejercicio te resultará interesante y es rápido de hacer.

Léete de todos modos estas entradas:

• Posicionamiento relativo, absoluto, estático, fijo y sticky de cajas.
• Float y clear.

Vayamos al enunciado.

Justifica en cada caso qué tipo de posicionamiento se ha utilizado. En cada caso, ¿eres capaz de reproducir el código html y css para conseguir lo mismo visualizado?

Estas son las respuestas del ejercicio.

Imagen a: Posicionamiento estático. El posicionamiento estático es el que toda caja tiene de forma intrínseca y que el navegador otroga por defecto a toda etiqueta html.

Imagen b: Posicionamiento absoluto. La caja 1, ha salido del flujo natural de cajas y las cajas que habían detrás se han movido para ocupar el hueco generado. La caja 2 ocupa la posición de la caja 1 y la caja 3 la posición que la caja 2 tenía inicialmente.

Imagen c: Posicionamiento relativo. La caja 1 se ha desplazado pero su lugar natural no ha sido ocupado por otras cajas.

Imagen d: Posicionamiento flotante. La caja 1 se ha desplazado al extremo del espacio disponible que la contiene dejando su hueco listo para ser ocupado por las otras cajas colindantes que re reorganizan para ocuparlo.

¡Hola!

Querido lector,

Espero que este pequeño ejercicio te haya ayudado a entender un poquito mejor las formas más importantes que hay para mover cajas.  Hay alguna más como por ejemplo el valor sticky que sería interesante que investigaras.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!