Micaela 27 de septiembre de 2009 a las 09.03
   Imprimir artículo
elWebmaster.com

CSS: Guía definitiva para usar la propiedad z-index


La propiedad z-index de la que hemos hablado anteriormente ha sido siempre mal entendida, por lo que en esta nota discutiremos algunos de los usos pr√°cticos para ella y las diferencias entre navegadores.

Esta mirada global a z-index te proporcionar√° una excelente base para poder utilizar esta propiedad con confianza y eficacia.

La mayoría de las propiedades CSS son bastante sencillas de manejar. A menudo, la aplicación de una propiedad CSS a un elemento de tu código tendrá resultados inmediatos Рtan pronto como se actualice la página, el valor establecido para la propiedad entra en vigor, y ves el resultado inmediatamente. Otras propiedades CSS, sin embargo, son un poco más complejas y sólo funcionarán en un determinado conjunto de circunstancias.

La propiedad z-index pertenece a este √ļltimo grupo. Ha causado tanta confusi√≥n y ¬†frustraci√≥n como cualquier otra propiedad CSS. Sin embargo, cuando z-index se entiende completamente, es una propiedad muy f√°cil de usar, y ofrece un m√©todo eficaz para superar muchos desaf√≠os de dise√Īo.

¬ŅDe qu√© se trata?

La propiedad z-index determina el nivel de pila de un elemento HTML. El “nivel de pila” se refiere a la posici√≥n del elemento en el eje Z (en comparaci√≥n con el eje X o eje Y). Un mayor valor de z-index significa que el elemento estar√° m√°s cerca de la parte superior del orden de apilamiento. Este orden de apilamiento es perpendicular a la pantalla o visor.

Representación tridimensional del eje Z:

1

Para poder demostrar de forma clara cómo funciona z-index, la imagen de arriba exagera la cantidad de elementos apilados en relación al visor.

El orden natural de apilamiento

En una p√°gina HTML, el orden natural de apilamiento (por ejemplo, el orden de los elementos en el eje Z) se determinada por un n√ļmero de factores. Abajo hay una lista que muestra el orden en que los √≠tems encajan en un contexto de apilamiento, comenzando por el final de la pila. La lista asume que ninguno de los √≠tems tiene z-index aplicado:

* El fondo y bordes del elemento que establece el contexto de apilación.

* Elementos con contextos de apilación negative, en orden de aparición.

* Elementos Non-posicionados, non-floated, block-level, en orden de aparición.

* Elementos No-posicionados, floated elements, en orden de aparición.

* Elementos Inline, en orden de aparición.

* Elementos posicionados, en orden de aparición.

La propiedad z-index, cuando se aplica correctamente, puede cambiar este orden natural de apilamiento.

Por supuesto, el orden de apilamiento de los elementos no es evidente a menos que los elementos estén en condiciones de sobreponerse entre sí. Por lo tanto, para ver el orden de apilamiento natural, márgenes negativos se pueden utilizar como se muestra a continuación:

24
Los cuadros de arriba tienen fondos y bordes de colores diferentes, y los dos √ļltimos son indentados y poseen m√°rgenes superiores negativos para que puedas ver el orden de apilamiento natural. El cuadro gris aparece en primer lugar en el c√≥digo, el cuadro azul en segundo lugar, y el cuadro dorado tercero. Los m√°rgenes negativos aplicados demuestran claramente este hecho. Estos elementos no tienen valores z-index establecidos, su orden de apilamiento es el natural, o por defecto, el orden. Los solapamientos que se producen se deben a los m√°rgenes negativos.

¬ŅPor qu√© causa confusi√≥n?

Aunque z-index no es una propiedad difícil de entender, debido a las falsas suposiciones puede causar confusión en el comienzo a los desarrolladores. Esta confusión se produce porque z-index sólo funcionará en un elemento cuya propiedad de posición se ha establecido explícitamente en absoluto, fijo, o relativo.

Para demostrar que z-index sólo funciona en los elementos posicionados, aquí están las mismas tres cajas con valores z-index aplicados para tratar de revertir su orden de apilamiento:

35
El cuadro gris tiene un valor de z √≠ndice de “9999”, el cuadro azul tiene un valor de z √≠ndice de “500”, y el cuadro dorado tiene un valor de z √≠ndice de “1”. L√≥gicamente, se podr√≠a suponer que el orden de apilamiento de las cajas ahora debe ser revertida. Pero ese no es el caso, porque ninguno de estos elementos tiene la propiedad de posici√≥n programada.

Aqu√≠ est√°n las mismas cajas con posici√≥n relativa a√Īadida a cada una, y su valor z-index mantenido:

44

Ahora el resultado es el esperado. El orden de apilamiento de los elementos se revierte, la caja gris sobrepone a la azul y la azul a la dorada.

Sintaxis

La propiedad z-index puede afectar el orden de apilamiento tanto de los elementos inline como block-level, y es declarada por un valor integrador positivo o negativo, o un valor de auto. Un valor de auto le da al elemento el mismo orden de apilamiento que sus parientes.

Aquí está el código CSS para el tercer ejemplo de arriba, dónde la propiedad z-index está aplicada de forma correcta:

1. #grey_box {
2. width: 200px;
3. height: 200px;
4. border: solid 1px #ccc;
5. background: #ddd;
6. position: relative;
7. z-index: 9999;
8. }
9.
10. #blue_box {
11. width: 200px;
12. height: 200px;
13. border: solid 1px #4a7497;
14. background: #8daac3;
15. position: relative;
16. z-index: 500;
17. }
18.
19. #gold_box {
20. width: 200px;
21. height: 200px;
22. border: solid 1px #8b6125;
23. background: #ba945d;
24. position: relative;
25. z-index: 1;
26. }

Otra vez les recuerdo, que la propiedad z-index no funcionar√° a menos que sea aplicada a elementos posicionados.

Implementación JavaScript

Si deseas afectar el valor z-index de un elemento de forma dinámica por medio de Javascriot, la sintaxis es similar a cómo se accede a la mayoría de las otras propiedades CSS, como en el código que se muestra a continuación:

1. var myElement = document.getElementById(“gold_box”);
2. myElement.style.position = “relative”;
3. myElement.style.zIndex = “9999”;

En este c√≥digo, la sintaxis CSS “z-index” se vuelve “zIndex”. De forma similar, “background-color” se transforma en “backgroundColor”, “font-weight” en “fontWeight”, y as√≠.

También, la propiedad de posición se cambia utilizando el código de arriba para enfatizar nuevamente que el z-index sólo funciona en elementos posicionados.

Implementaciones indebidas en IE y Firefox

Bajo ciertas circunstancias, hay algunas peque√Īas incongruencias en las versiones de Internet Explorer 6 y 7 y Firefox versi√≥n 2 con respecto a la aplicaci√≥n de la propiedad z-index.

Elementos <select> en IE6

En Internet Explorer 6, el elemento <select> es un control de ventana, y así aparecerá siempre en la parte superior del orden de apilamiento, independientemente del orden natural de apilación, los valores de posición, o z-index. Este problema se ilustra en la captura de pantalla a continuación:

54
El elemento <select> aparece primero en el orden natural de la pila y se le da un valor de z √≠ndice de “1”, junto con un valor de posici√≥n de “relativo”. La caja dorada aparece en segundo lugar en la pila de orden, y se le da un valor de z √≠ndice de “9999”. Debido al orden natural de la pila y los valores del z-index, el cuadro dorado debe aparecer en la parte superior, lo que lo hace en todos los navegadores actualmente utilizados, excepto IE6:

63

A menos que estés viendo esta página con IE6, verá el cuadro de oro por encima del elemento <select>.
Este error en IE6 ha causado problemas con los men√ļs desplegables porque no se superponen los elementos <select>. Una soluci√≥n es el uso de JavaScript para ocultar temporalmente el elemento <select> , y luego hacerlo reaparecer cuando el men√ļ de superposici√≥n desaparece. Otra soluci√≥n consiste en utilizar un <iframe>.

Parientes posicionados en IE6/7

Las versiones de Internet Explorer 6 y 7 de forma incorrecta restablecen el contexto de apilamiento en relación con el elemento ancestro más cercano posicionado. Para demostrar este error un tanto complicado, vamos a mostrar dos de las cajas de nuevo, pero esta vez vamos a envolver la primera caja en un elemento posicionado:

74
El cuadro gris tiene un valor de z √≠ndice de “9999”, el cuadro azul tiene un valor de z √≠ndice de “1” y ambos elementos est√°n posicionados. Por lo tanto, la correcta aplicaci√≥n es mostrar el cuadro gris sobre la caja azul.

Si est√°s viendo esta p√°gina en IE6 o IE7, ver√°s el cuadro azul sobreponer la caja gris. Esto es causado por el elemento posicionado que envuelve la caja gris. Estos navegadores “resetean” de forma incorrecta el contexto de apilamiento en relaci√≥n con la posici√≥n de los padres, pero esto no deber√≠a ser el caso. El cuadro gris tiene un valor de z-√≠ndice mucho mayor, por lo que debe sobreponer a la caja azul. Todos los otros navegadores hacen esto correctamente.

Valores negativos en Firefox 2

En la versión de Firefox 2, un valor de z-índice negativo posicionará un elemento detrás del marco de apilamiento en lugar de en frente del fondo y los bordes del elemento que establecen el contexto de apilamiento. Aquí hay una captura de pantalla que muestra este error en Firefox 2:

82

Debajo est√° la versi√≥n HTML de la captura de pantalla de arriba, as√≠ que si ves esta p√°gina en Firefox 3 o en otro navegador actualmente usado, ver√°s la correcta aplicaci√≥n: El fondo de la caja gris (que es el elemento que establece el apilamiento de contexto) aparece debajo de todo lo dem√°s, y el texto inline de la caja gris aparece encima de la caja azul, lo que est√° de acuerdo con el orden de apilamiento “natural” de las normas descriptas anteriormente.

92

Fuente: Smashing Magazine


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

Comentarios (5)

  1. Emiliano dice:

    Muy √ļtil, gracias.

  2. Christian dice:

    Muy util el aporte, pero tuve un inconveniente con Flash sobre otros DHTML Elements, por suerte, f√°cilmente resueltos http://tinyurl.com/yedlsor

    Saludos

    PD: Follow Me on
    – Twitter http://twitter.com/dreamcoders
    – Facebook: http://facebook.com/dreamcoders

  3. Isma-Chistes dice:

    Buenas y gracias por la aportación, pero alguien sabría como utilizar el z-index en tecnologías móviles, la verdad que lo controlo bien en todos lo navegadores pero no funciona como quiero en las pantallas táctiles.

    Gracias.

  4. jesus dice:

    Muy buen artículo, gracias!

  5. Jonathan dice:

    Hola, por favor.Necesito ayuda. Estoy armando una web, cree su hoja css y una “pagina principal” La p√°gina tiene un spry (menu horizontal). Tengo todos los z-index en orden, sin embaergo el men√ļ (z-index:10) queda por debajo del texto (z-index:2). Porqu√© puede ser? Muchas gracias.

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