viernes, 30 de julio de 2010

Z-index: cuidado al usarlo


Capa por allí, capa por allá. Z-index es la propiedad por la que otorgamos jerarquía a las capas en diseño web: podemos esconder o mostrar ciertas partes de los elementos web al superponer otros. Pero hay veces que tenemos serios problemas con esta propiedad por los bugs de los propios exploradores (IE...). Por otro lado si estas acostumbrado a trabajar con software de la casa Adobe, no tendrás problemas en comprender cómo va todo esto de trabajar con capas.

Es por ello por lo que desde CreativosOnline se nos aconseja al utilizar z-index:

1.Intenta definir siempre position:relative, pero si no es posible al menos define una posición, no lo dejes heredado.

2.Trata de no usar z-index negativos, ya que Firefox utiliza z-index:0 para él, así que si pones -1 no se verá tu elemento (quedará oculto...tras el propio navegador). [Según comprobaciones, este bug no existe en la versión 3, así que tened cuidado con versiones anteriores].

Y por si acaso aún no te ha quedado claro de qué va la movida, en el siguiente enlace te lo explican muy detalladamente: Z-index Test (en inglés).

2 comentarios:

Anónimo dijo...

El mozilla firefox acepta Z-index negativo neng negativo.

No poner post obsoletos.

Jose Toknine dijo...

Razón tienes, Anónimo. El bug sobre las capas en Firefox viene reportado con respecto a la versión 2 de este navegador. Parece que en la 3 se solucionó dicho problema. Edito y añado esta información al post.