Propiedad z-index de CSS

La propiedad CSS z-index especifica el orden z de un elemento y sus descendientes o elementos flex. El orden z es el orden de los elementos en el eje z.

El z-index de un elemento especifica su orden dentro de un contexto de apilamiento. Un contexto de apilamiento es un grupo de elementos que comparten un mismo padre.

El elemento que tiene un orden de apilamiento más alto se encuentra delante del elemento con un orden de apilamiento más bajo. Los elementos con posicionamiento no estático se encuentran por encima de los elementos con posicionamiento estático por defecto.

INFO

La propiedad z-index afecta solo a los elementos posicionados que tienen un valor distinto de “static”.

Valor inicial	auto
Se aplica a	Elementos posicionados.
Heredado	No.
Animable	Sí.
Versión	CSS2
Sintaxis DOM	object.style.zIndex = "-1";

Sintaxis

Sintaxis de la propiedad CSS z-index

css

z-index: auto | number | initial | inherit;

Ejemplo de la propiedad z-index con un valor negativo:

Ejemplo de la propiedad CSS z-index con valor negativo

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        left: 0;
        top: 10px;
        z-index: -1;
      }
    </style>
  </head>
  <body>
    <h2>Z-index property example</h2>
    <img src="https://es.w3docs.com/build/images/w3docs-logo-black.png" alt="W3docs logo" width="200" height="100" />
  </body>
</html>

Try it Yourself »

Ejemplo de la propiedad z-index con un valor positivo:

Ejemplo de la propiedad CSS z-index con valor numérico

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blue,
      #green,
      #grey {
        position: absolute;
        width: 150px;
        height: 150px;
        color: #eee;
        opacity: 0.95;
        padding: 15px;
        line-height: 100px;
        text-align: center;
      }
      #blue {
        z-index: 1;
        background-color: #1c87c9;
        top: 60px;
        left: 50px;
        line-height: 1;
      }
      .black {
        height: 80px;
        width: 160px;
        background-color: #000;
        line-height: 100px;
        bottom: 20px;
        position: absolute;
        z-index: 10;
      }
      #green {
        z-index: 2;
        background-color: #8ebf42;
        top: 100px;
        left: 170px;
      }
      #grey {
        background-color: #666;
        top: 200px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Z-index property example</h2>
    <div class="container">
      <div id="blue">
        Blue
        <div class="black">Black</div>
      </div>
      <div id="green">Green</div>
      <div id="grey">Grey</div>
    </div>
  </body>
</html>

Try it Yourself »

Resultado

CSS z-index Property

Valores

Valor	Descripción	Probarlo
auto	El nivel de apilamiento de la caja generada es igual al de sus padres. Este es el valor predeterminado de esta propiedad.	Probarlo »
number	El nivel de apilamiento de la caja generada especificado por números. Los valores negativos son válidos.	Probarlo »
initial	Hace que la propiedad use su valor predeterminado.	Probarlo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad 'z-index' en CSS?

Permite que los elementos se superpongan con control sobre cómo se apilan.Cambia el color de un elemento.Decide el orden de apilamiento de los elementos posicionados.Modifica el tamaño de un elemento.Solo es efectiva en elementos posicionados.Manipula el estilo del borde de un elemento.

Propiedad z-index de CSS ​

Sintaxis ​

Ejemplo de la propiedad z-index con un valor negativo: ​

Ejemplo de la propiedad z-index con un valor positivo: ​

Resultado ​

Valores ​