Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
Agregando z-index
Agregandoz-index
El primer ejemplo,Apilando sin z-index, explica cómo es organizado el apilamiento por defecto. Si quieres especificar un orden diferente de apilamiento, debes posicionar un elemento y usar la propiedad z-index.
Esta propiedad es asignada con un valor entero (positivo o negativo), el cuál representa la posición del elemento en el eje-Z. Si no estás familiarizado con el eje-Z, imagina que la página tiene muchas capas una encima de la otra. Cada capa es numerada. Una capa con un número mayor es renderizada encima de las capas con números menores.
Advertencia:z-index solo tiene efecto si un elemento esposicionado.
- bottom: el más lejano al observador
- ...
- Capa -3
- Capa -2
- Capa -1
- Capa 0capa de renderizado por defecto
- Capa 1
- Capa 2
- Capa 3
- ...
- top: el más cercano al observador
Nota:
- Cuando la propiedad z-index no ha sido especificada, los elementos son renderizados en la capa de renderizado por defecto 0 (cero).
- Si varios elementos comparten el mismo valor z-index (i.e. están situados en la misma capa), las reglas de apilamiento explicadas en la secciónApilando sin z-index son aplicadas.
En el siguiente ejempo, el orden de apilamiento de las capas es organizado usando z-index. El z-index del DIV#5 no hace efecto ya que este no es un elemento posicionado.
Código fuente de ejemplo
<!doctype html><html> <head> <meta charset="UTF-8" /> <title>Adding z-index</title> <style type="text/css"> div { opacity: 0.7; font: 12px Arial; } span.bold { font-weight: bold; } #normdiv { z-index: 8; height: 70px; border: 1px dashed #999966; background-color: #ffffcc; margin: 0px 50px 0px 50px; text-align: center; } #reldiv1 { z-index: 3; height: 100px; position: relative; top: 30px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; text-align: center; } #reldiv2 { z-index: 2; height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; text-align: center; } #absdiv1 { z-index: 5; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #absdiv2 { z-index: 1; position: absolute; width: 150px; height: 350px; top: 10px; right: 10px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } </style> </head> <body> <br /><br /> <div> <br /><span>DIV #1</span> <br />position: absolute; <br />z-index: 5; </div> <div> <br /><span>DIV #2</span> <br />position: relative; <br />z-index: 3; </div> <div> <br /><span>DIV #3</span> <br />position: relative; <br />z-index: 2; </div> <div> <br /><span>DIV #4</span> <br />position: absolute; <br />z-index: 1; </div> <div> <br /><span>DIV #5</span> <br />no positioning <br />z-index: 8; </div> </body></html>También puedes ver
- Apilando sin z-index : Reglas de apilamiento por defecto
- Apilamiento y float : Cómo son manejados los elementos flotantes
- El contexto de apilamiento : Notas sobre el contexto de apilamiento
- Ejemplo 1 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en el último nivel
- Ejemplo 2 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en todos los niveles
- Ejemplo 3 del contexto de apilamiento : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
Información del documento original
- Autor(es): Paolo Lombardi
- Este artículo es una traducción al inglés de un artículo que escribí en italiano paraYappY. He dado el derecho de compartir el contenido bajoCreative Commons: Attribution-Sharealike license
- Last Updated Date: November 3rd, 2014