En este artículo vamos a ver cómo funciona z-index en CSS. Z-index funciona como una pila para los elementos que son visibles en la pantalla. Podemos asignar un número a la propiedad del índice z para asignarle una posición en la pila. El número asignado puede ser negativo. El número mayor asigna la posición delantera y el número menor asigna la posición trasera. Considere el ejemplo de que una etiqueta img tiene el índice z como 1 y otra etiqueta h1 tiene el índice z como 2. Por lo tanto, la etiqueta con el índice z igual a 2 aparecerá antes que el índice z igual a 1, es decir, el contenido de la etiqueta h1 aparecerá apilado en etiqueta img. El índice z predeterminado es 0 para todos los elementos.
Sintaxis:
z-index: number;
Enfoque: en este ejemplo, usaremos una etiqueta de imagen y una etiqueta de encabezado para apilarse una sobre la otra. Asignaremos el índice z a la etiqueta de imagen.
Ejemplo 1: en el siguiente código, intentamos apilar el encabezado h1 en la imagen asignando a la etiqueta de imagen un índice z de -1.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#image1{
height: 100px;
width: 100px;
z-index: -1;
position: absolute;
}
</style>
</head>
<body>
<h1>z-index property in css</h1>
<div id="image1"></div>
<img id="image1" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210316171438/Screenshot-2021-03-16-171322.png"
alt="">
<p>Geeks for Geeks is the best website for CS.</p>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente código, intentamos apilar la imagen en el encabezado h1 asignando a la etiqueta de imagen un índice z de 1.
HTML
<!DOCTYPE html>
<html lang="en">
<style>
#image1{
height: 100px;
width: 100px;
z-index: 1;
position: absolute;
}
</style>
<body>
<h1>z-index property in css</h1>
<div id="image1"></div>
<img id="image1" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210316171438/Screenshot-2021-03-16-171322.png"
alt="">
<p>Geeks for Geeks is the best website for CS.</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por devangj9689 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA