¿Qué posicionamiento css se ha usado?

¿Qué posicionamiento css se ha usado?

5
(2)

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
Pregunta a)
¿Qué posicionamiento css se ha usado? 2
Pregunta b)
¿Qué posicionamiento css se ha usado? 3
Pregunta c)
¿Qué posicionamiento css se ha usado? 4
Pregunta d)

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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 2

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No Comments

Post A Comment