15 Mar ¿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:
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?




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!
Entradas relacionadas:
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Lo más importante que debéis aprender en este curso es como tabular correctamente vuestro código. Incluye imágenes de casos bien tabulados y mal tabulados.
Se muestran dos soluciones simples que usan exclusivamente CSS para el conocido reto de terminar un contenido con 3 puntos suspensivos. "..."
El modelo de cajas nos permite definir mediante CSS las propiedades físicas de espacio a una etiqueta html que esté dentro del body. En esta publicación se habla del ancho, altura, relleno, borde y fo...
Comparto mi chuleta de instrucciones css útiles para estilizar table de html. Vemos un ejemplo de aplicación.
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
No Comments