La propiedad del índice z se usa para desplazar elementos en el eje z, es decir, dentro o fuera de la pantalla. Se utiliza para definir el orden de los elementos si se superponen entre sí.
Sintaxis:
z-index: auto|number|initial|inherit;
Valores de propiedad:
- auto: el orden de la pila es igual al del padre (predeterminado).
- número: El orden de la pila depende del número.
- initial : establece la propiedad en su valor predeterminado.
- heredar: hereda la propiedad del elemento padre.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>
z-index Property
</title>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
h1,
p {
background-color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geek.png"
width="400" height="150">
<p>This example shows the use of z-index property.</p>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>
z-index Property
</title>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: +1;
}
h1,
p {
background-color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geek.png"
width="400" height="150">
<p>This example shows the use of z-index property.</p>
</body>
</html>
Producción:
En el Ejemplo-1, el índice z se establece en -1, por lo tanto, la imagen aparece detrás del texto, pero en el Ejemplo-2, cuando el índice z se establece en +1, la imagen oculta el texto.
Navegadores compatibles: los navegadores compatibles con la propiedad z-index se enumeran a continuación:
- Google Chrome 1.0
- Borde 12.0
- Firefox 1.0
- Ópera 4.0
- Apple Safari 1.0
Publicación traducida automáticamente
Artículo escrito por AshwinGoel y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA