Todos hemos visto que los desarrolladores a veces establecen valores de índice z en 999, 99999, etc. para garantizar que un elemento siempre permanezca en la parte superior.
En este artículo, discutiremos los valores máximos y mínimos para la propiedad CSS z-index .
índice z: es la propiedad CSS que define el nivel de pila de los elementos posicionados en el contexto de pila actual, es decir, los elementos con un índice z más pequeño están cubiertos por elementos con un índice z más grande.
- La palabra clave auto o un <entero> se usa para establecer la propiedad del índice z.
- Los elementos con cualquier posición además de la estática se ven afectados por el índice z.
El valor máximo y mínimo para el índice z en la mayoría de los navegadores está limitado a un valor de 32 bits con signo, es decir, de −2147483648 a +2147483647.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.box1 {
background-color: green;
position: absolute;
z-index: -1;
height: 200px;
width: 200px;
}
.box2 {
background-color: blue;
position: absolute;
left: 50px;
z-index: 0;
height: 100px;
width: 300px;
}
.box3 {
background-color: red;
position: absolute;
left: 150px;
top: 50px;
z-index: 1;
height: 120px;
width: 250px;
}
</style>
</head>
<body>
<h2 style="color:green">
GeeksforGeeks
</h2>
<b>
<p>max and min value of z-index</p>
</b>
<div class='container'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por chiragchouhan163 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA