Juan Manuel 2 de julio de 2008 a las 12.58
   Imprimir artículo
elWebmaster.com

驴C贸mo funciona la propiedad “z-index” en CSS?


驴C贸mo funciona la propiedad 鈥渮-index鈥 en CSS?Para los que no son expertos en CSS, muchas veces es un misterio el modo en que funciona la propiedad z-index. Pero lo cierto es que es bastante utilizada y nos permite corregir r谩pidamente alg煤n detalle o problema de ubicaci贸n de los elementos, trabajando en conjunto con la archiconocida float.

Para arrojar un poco de luz sobre el asunto te propongo conocer las funciones b谩sicas de z-index y probar una demo online interactiva donde cada cambio que vas realizando en los valores se muestra autom谩ticamente. 隆Comencemos ya!

Las reglas b谩sicas de z-index:

  • Un contenedor est谩 apilado al mismo nivel que su objeto “padre” a menos que esto se modifique mediante la propiedad z-index.
  • z-index s贸lo funciona con objetos que tengan la propiedad position seteada como relative, fixed o absolute.
  • Asignar un valor de opacidad menor que 1 a un elemento posicionado genera impl铆citamente un contexto de apilamiento, lo que equivale a usar z-index.

Para un contenedor posicionado, la propiedad z-index especifica:

  1. El nivel de apilamiento del contenedor en el contexto de apilamiento actual.
  2. Si el contenedor establece un contexto de apilamiento local.

Si no se ha especificado un valor para z-index, los elementos se apilan en el siguiente orden (de m谩s atr谩s hacia adelante):

  1. Contenedores en el flujo normal, de acuerdo con la secuencia establecida en el c贸digo fuente.
  2. Contenedores flotantes (que usan float).
  3. Contenedores posicionados, de acuerdo a la secuencia del c贸digo fuente.

Demo online interactiva del funcionamiento de z-index:

Con esta herramienta online puedes testear en tiempo real los cambios que vayas haciendo en cada contenedor, para entender visualmente (de eso se trata CSS) c贸mo funciona z-index.

驴C贸mo funciona la propiedad 鈥渮-index鈥 en CSS?
Haz clic aqu铆 para probar esta herramienta.

Con esto s贸lo no me alcanza. 驴D贸nde puedo encontrar m谩s informaci贸n?

Para las mentes inquietas, lo mejor es recurrir a algunas fuentes en ingl茅s:

隆Espero que esto te haya sacado muchas dudas! 隆No dudes en dejar un comentario si te ha quedado alguna!

Fuente: TJK Design


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (7)

  1. oliverastro dice:

    lo probaremos, se ve muy interesante el demo online, gracias

  2. Erik dice:

    Estoy tratando de entender como funciona todo y esto me viene genial, muchisimas gracias!

  3. omar dice:

    muchas gracias!! muy bien explicado, sencillo y potente 馃榾

  4. poctrellat dice:

    隆No sabes el papelazo que me haces explicando esto !
    隆Much铆simas gracias por tu tiempo y esfuerzo!

  5. Christian dice:

    OO muy bueno =)

  6. Jhon Alex dice:

    Que mejor manera de entender esa propiedad con el demo 馃榾

  7. Tools dice:

    WOW just what I was looking for. Came here by searching for seo

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder