Cuando tenemos que ordenar elementos en el eje z, usamos la propiedad z-index . en CSS, la propiedad z-index solo funciona en elementos con un valor de posición que no sea estático. En este artículo, aprenderemos sobre la propiedad del índice z y sus valores, auto, número, inicial y herencia. También veremos la diferencia entre todos los valores.
Sintaxis:
z-index: auto | integer | initial | inherit;
Propiedades: esta propiedad tiene los siguientes valores, como se mencionó anteriormente y se describe a continuación.
- auto: Establece el orden de la pila igual a sus padres. Este es el valor predeterminado.
- entero: Establece el orden de pila del elemento. También podemos usar números negativos.
- initial: Establece esta propiedad en su valor por defecto.
- heredar: hereda esta propiedad de su elemento padre.
Nota: La propiedad del índice z no funciona en elementos de posición estática.
Los siguientes ejemplos ayudarán a comprender las diferencias entre los valores de la propiedad.
Ejemplo 1: En este ejemplo, usaremos la propiedad del índice z en el elemento.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
width: 170px;
height: 170px;
border: 2px solid black;
}
#box-1 {
top: 69px;
position: relative;
background-color: rgb(0, 126, 42);
z-index: auto;
}
#box-2 {
top: 34px;
position: relative;
background-color: rgb(175, 13, 13);
}
</style>
</head>
<body>
<div class="box" id="box-1"></div>
<div class="box" id="box-2"></div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, usaremos la propiedad del índice z en ambos elementos.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
width: 170px;
height: 170px;
border: 2px solid black;
}
#box-1 {
top: 69px;
position: relative;
background-color: rgb(0, 126, 42);
z-index: auto;
}
#box-2 {
top: 34px;
position: relative;
background-color: rgb(175, 13, 13);
z-index: auto;
}
</style>
</head>
<body>
<div class="box" id="box-1"></div>
<div class="box" id="box-2"></div>
</body>
</html>
Salida: podemos ver claramente que no hay diferencia entre el índice z automático y sin índice z.
Ejemplo 3: cuando especificamos el índice z como 0, crea un contexto de apilamiento.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.z {
position: relative;
width: 100px;
height: 100px;
top: 40px;
left: 40px;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
#example2 {
margin-top: 30px;
}
</style>
</head>
<body>
<div id="example1">
<div class="z red">
<div class="z green"
style="z-index: 1"></div>
</div>
<div class="z blue"></div>
</div>
<div id="example2">
<div class="z red"
style="z-index: 0">
<div class="z green"
style="z-index: 1">
</div>
</div>
<div class="z blue"></div>
</div>
</body>
</html>
Producción:
Explicación de los ejemplos: En el primer ejemplo, podemos ver que el verde está posicionado sobre el azul y el rojo, esto se debe a que el color verde tiene índice z 1. Por lo tanto, se crea un contexto de apilamiento.
Pero en el segundo ejemplo, el verde se coloca por encima del rojo pero por debajo del azul debido a que el rojo tiene un índice z de 0. Por lo tanto, se crea un contexto de apilamiento al mismo nivel que el azul.
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA