z-index

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Resumen

La propiedad CSS z-index indica el orden de un elemento posicionado y sus descendientes. Cuando varios elementos se superponen, los elementos con mayor valor z-index cubren aquellos con menor valor.

Para una caja posicionada (es decir, una con cualquier position aparte de static), la propiedad z-index especifica:

  1. El nivel de apilamiento en el actual contexto de apilado.
  2. Si la caja establece un contexto de apilamiento local.
Valor inicialauto
Applies topositioned elements
Heredableno
Valor calculadocomo se especifica
Animation typean integer
Creates stacking contextyes

Syntax

z-index:  auto | <entero> | inherit

Values

auto

La caja no establece un nuevo contexto de apilamiento. El nivel de apilamiento de la caja generada es el mismo que el de la caja padre.

<integer>

Este entero es el nivel de apilamiento de la caja generada en el actual contexto de apilamiento. La caja además establece un contexto de apilamiento en el que el nivel de apilamiento es 0. Esto significa que los z-index de los elementos descendientes no son comparados con los elementos que están fuera de este elemento.

Ejemplos

must be provided

Especificaciones

Specification
Cascading Style Sheets Level 2
# z-index

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
z-index
auto
Negative values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Ver también