¿Qué posicionamiento css se ha usado?

¿Qué posicionamiento css se ha usado?

Print Friendly, PDF & Email
¿Qué posicionamiento css se ha usado?
Valora esta entrada

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!

Entradas relacionadas:

Sintaxis CSS básica. Cómo se escribe el CSS.
- 309
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Significado de las propiedades top, bottom, left, right de css
- 1292
Para cada propiedad se muestra un ejemplo visual del efecto de un valor positivo o negativo de top, right, bottom y left.
Mi chuleta de instrucciones css útiles para estilizar table de html
- 16
Comparto mi chuleta de instrucciones css útiles para estilizar table de html. Vemos un ejemplo de aplicación.
Ejemplo de menú vertical con submenú horizontal mediante CSS
- 421
Código html y css de como crear un menú vertical con un submenú horizontal.
La propiedad overflow
- 203
Resumen de uso de la propiedad de overflow de CSS. Apuntes de teoría del curso IFCD0110 del curso confección y publicación de páginas web.
Factores que afectan al tiempo de carga de una página web
- 404
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Creación de un menú horizontal con sub menú desplegable mediante CSS
- 615
Código CSS explicado paso a paso para crear un menú horizontal con un sub menú vertical. Apuntes de alumno IFCD0110 tutorial CSS.
Creación de una página web en mantenimiento con html y css
- 38
Creación de una landing page de página en mantenimiento con html y css. Incluye solución.
Genera una escala cromática con css
- 35
En este ejercicio css se practica la creación de una paleta de colores mediante rgba. Además, se practican otros conceptos importantes como el selector de atributo. Incluye solución.
Como mezclar CSS y HTML. Acoplamiento CSS
- 371
Existen 3 mecanismos para mezclar html y css. Veamos como se hace.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.