Cómo utilizar Z-Index, la superposición por capas.

5250

Z-Index es una propiedad del lenguaje de estilos CSS (Cascading Style Sheet) que se basa en la superposición de un elemento sobre otro mediante capas.
Esta es la propiedad que se usa para dar prioridad a unos elementos sobre otros en nuestra página.

Primero tienes que saber que puedes combinar z-index con los posicionamientos base (relative-absolute, fixed-sticky o static)
La propiedad se rije por valores numéricos. Pero por defecto todos nuestros elementos tendrán un valor automático, es decir, el superposicionamiento de estos estará definido por el orden de nuestra estructura HTML que como bien sabemos lee con preferencia de abajo a arriba
Si se establece un valor positivo, este elemento se sitúa por delante de los demás. Si se establece un valor negativo, se sitúa por detrás.
-Para introducir la propiedad, en nuestro apartado o nuestro archivo .css, solo añadimos a nuestro elemento en cuestión el atributo con un valor especificado:
(Por ejemplo: z-index: 3)

<styles>
.verde {
      background: green;
      width: 150px;
      height: 150px;
      z-index: 4;
          }
.azul {
     background: blue;
     width: 150px;
     height: 150px;
     z-index: 3;
          }

<body>
<navclass="verde"></nav>
<nav class="azul"></nav>

Captura de pantalla 2023-10-12 141726.png
De no haber especificado ningún valor, el cuadrado azul hubiese tenido preferencia dado que está escrito debajo.

Ahora bien, si un elemento tiene un z-index menor que otros, sus hijos nunca estarán por delante de estos elementos hermanos, incluso cuando tengan un z-index mayor. Solo se superpondran por encima de su elemento padre.
Aquí tienes otro ejemplo visual:

<styles>
.verde {
    background: green;
    width: 150px;
    height: 150px;
    z-index: 4;
        }
.azul {
    background: blue;
    width: 150px;
    height: 150px;
    z-index: 3;
        }
.rojo {
     background: red;
     width: 150px;
     height: 150px;
     z-index: 5;
        }

<body><navclass="verde"></nav><navclass="azul"><pclass="rojo"></p></nav>

Captura de pantalla 2023-10-12 143809.png

Vemos que el cuadrado rojo, que es hijo directo del azul, tiene un z-index mayor que él, por lo que se pone por encima de su este su elemento padre.
Y por otro lado vemos que este cuadrado rojo sigue por detrás del verde a pesar tener un z-index también mayor que él.
Esto se debe a que a pesar de el rojo tener el valor más alto de los tres, como elemento hijo, solo va a tomar de referencia a su padre, respetando así a todos sus hermanos y adyacentes. Por ende como el azul si que tiene un valor inferior a su elemento hermano verde, el rojo le respetará y no se superpondrá ante él también.

hace un año

Escribe tu comentario

+ 2

Entradas relacionadas

Tutorial de como colocar backgrounds utilizando ccs

La manera correcta de hacer esto es en una pestaña de ccs dentro del editor de codigo o abriendo la etiqueta <Style> </Style> de

marioxcachazo

Cómo hacer un piano sencillo con dos teclas de color rosa usando HTML y CSS

En este tutorial te mostraré cómo crear un piano básico con dos teclas usando solo HTML y CSS. Las teclas serán de color rosa y, cuando haga

carozamb

Crea un Piano con Botones usando HTML y CSS

Hola! 😄 Acompáñame en este pequeño tutorial a través del cual construiremos el aspecto gráfico de un piano usando botones de HTML y estilos

robledocorrea

Domina la creación de tarjetas HTML y CSS: ¡Conviértete en un maestro de las 🃏 Cards en Frontend! 🚀

En este emocionante tutorial, vamos a sumergirnos en el fascinante mundo de la creación de tarjetas HTML y CSS. Si eres como yo, un apasiona

cpedrozamesa