En este artículo, veremos cómo funciona z-index en CSS. Como todos sabemos, tomamos la ayuda de la dimensión para mirar cada elemento, determina el tamaño de un objeto por completo. Entonces, el índice z se usa para representar el elemento a lo largo del eje z. El valor predeterminado del índice z es cero.
Ejemplo:
Entendámoslo a partir de un ejemplo.
Tenemos unas cartulinas que tienen el mismo tamaño, pero son todas de diferentes colores. Así que si queremos verlos juntos, pero nos parecerá algo así.
2D
En esta hemos utilizado solo dos dimensiones, es decir, sobre la dimensión X y la dimensión Y, también podemos ver en ella la dimensión Z.
3D
Todo el concepto de índice z está relacionado con el 3D, podemos ajustar el eje z con la propiedad llamada índice z.
El valor de z también puede ser positivo, negativo o cero.
Implementaciones de código:
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="d1">I'm Div One</div> <div class="d2">I'm Div Two</div> <div class="d3">I'm Div Three</div> <div class="d4">I'm Div Four</div> </body> </html>
CSS (estilo.css):
CSS
div {
width: 140px;
height: 140px;
margin: 10px;
text-align: center;
/* Only display the last div */
position: absolute;
}
/* If we want to adjust the z-axis */
/* use z-index */
.d1 {
background-color: #79D588;
top: 50px;
/* z-index: 10; */
/* Use comment/uncomment upper
line to see the difference */
}
.d2 {
background-color: #F6CD6C;
top: 70px;
/* z-index: 10; */
/* Use comment/uncomment upper
line to see the difference */
}
.d3 {
background-color: #289485;
top: 90px;
z-index: 10;
/* Use comment/uncomment upper
line to see the difference */
}
.d4 {
background-color: #403E3E;
top: 110px;
/* z-index: 10; */
/* Use comment/uncomment upper
line to see the difference */
}
Nota: puede comentar o descomentar las propiedades del índice z de cada div y luego verificar la salida una por una.
Producción :
producción
Publicación traducida automáticamente
Artículo escrito por mrsuryapratap y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA