Prueba la diferencia entre position relative, absolute, static y fixed

Existen muchas dudas sobre como funcionan las posiciones en CSS.

Aquí les paso un dato muy interesante, quirksmode.org tiene una página que te permite seleccionar el tipo de posición que quieres darle a un elemento y ver el resultado.

la página se ve así

hay 2 elementos en esa página que tienes que notar:

El elemento de prueba

y el div que está en position absolute dentro del elemento de prueba.

Como puedes ver en la imagen de la página, el elemento de prueba está en position static (que es la posición por defecto de cualquier elemento) el div con position: absolute; aparece afuera del elemento de prueba.

¿Por que pasa eso?

Pues porque el elemento de prueba no está no position: relative;

Haz la prueba tu mismo, entra al link que doy a continuación y cambia la posición a relative.

Vale la pena darle una mirada, aquí les dejo el enlace a quircksmode.org - CSS test, position declaration, donde podrán probar las diferencias entre posciones (relative, static, absolute y fixed).

Que se diviertan ;)

Comentarios

deja un comentario

1. Daniel

   Muy buenas las comparaciones, sirve para darse cuenta de algunas cosas cuando uno esta aprendiendo, como yo.

   Gracias

2. Joan

   Al fin he comprendido la diferencia entre los distintos tipos de posicionamiento de elementos dentro de una página con CSS.

   Muchas gracias por el artículo.

3. Requerido

   Entiendo la función de posición absoluta, pero no entiendo bien la diferencia entre posición relativa y estática.