¿Qué posicionamiento css se ha usado?

¿Qué posicionamiento css se ha usado?

Print Friendly, PDF & Email
¿Qué posicionamiento css se ha usado?
5 (100%) 1 voto[s]

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

Modifica el documento html y desvincula el máximo posible el html y el javascript.

Pregunta a)
Pregunta b)
Pregunta c)
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!

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 hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.