¿Qué posicionamiento css se ha usado?

5
(2)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

Portada ejercicio deducir posicionamiento css de cajas

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:

Vayamos al enunciado.

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?
¿Qué posicionamiento css se ha usado? 1

¿Qué posicionamiento css se ha usado? 2

¿Qué posicionamiento css se ha usado? 3

¿Qué posicionamiento css se ha usado? 4

Solución del ejercicio

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!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *