1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

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í

pagina de poscionamiento de quirks mode

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

El elemento de prueba

elemento de prueba

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

div 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 ;)

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de Daniel Daniel

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

    Gracias

  2. Avatar de Joan 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. Avatar de Requerido Requerido

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

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910