div ( z-index: 1; /* integer */ )La z-indexpropiedad en CSS controla el orden de apilamiento vertical de los elementos que se superponen. Como en, cuál parece estar físicamente más cerca de ti. z-indexsolo afecta a los elementos que tienen un valor de posición diferente a static(el predeterminado).
Los elementos pueden superponerse por una variedad de razones, por ejemplo, el posicionamiento relativo lo ha empujado sobre otra cosa. El margen negativo ha tirado del elemento sobre otro. Los elementos absolutamente posicionados se superponen entre sí. Todo tipo de razones.
Sin ningún z-indexvalor, los elementos se apilan en el orden en que aparecen en el DOM (el más bajo en el mismo nivel jerárquico aparece en la parte superior). Los elementos con posicionamiento no estático siempre aparecerán encima de los elementos con posicionamiento estático predeterminado.
También tenga en cuenta que la anidación juega un papel importante. Si un elemento B se encuentra encima del elemento A, un elemento hijo del elemento A nunca puede ser más alto que el elemento B.
Tenga en cuenta que la versión anterior de IE tiene este contexto un poco arruinado. Aquí hay una solución de jQuery para eso.
Más información
- Screencast: cómo funciona el índice z
- Documentos de MDN
- Artículo completo: Comprensión del índice z
- Valores racionales del índice z
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Trabajos | Trabajos | Trabajos | Trabajos | 4+ | 4+ | Trabajos |