como se usa la propiedad z-index en tres pasos

Haremos un paso a paso de como usar la propiedad z-index en el contexto de apilamiento en tres pasos y no morir en el intento muy sencillo.

El primer paso en el body del HTML le damos forma y lugar a cada una de las inserciones que daremos posición

    class="purpure">Purpure
    class="black">Black
      class="yellow">Yellow

paso 2: identificar que tipo de posición vamos a utilizar dentro de nuestro contenedor de estilos de nuestro css; como sabrán existen 5 tipos de posiciónde esta propiedad, para el ejemplo utilizaremos una posición absolute

<meta charset="“UTF-8”">
<meta http-equiv="“X-UA-Compatible”" content="“IE=edge”">
<meta name="“viewport”" content="“width=device-width," initial-scale="1.0”">
<title>Document</title>
<style><br> div {<br> position: absolute;```


El último es numerar los z-index y darle un valor de ponderación en la que de conformidad a esto tendrá un lugar en el eje z. Creamos 2 elementos padre y un elemento hijo con propiedades de forma rectangulares, las clases purpure y black, y yellow será nuestro elemento hijo para efectos de invocarlas. Le damos valor donde el mayor valor se entiende que estará delante del que está con menor valor de ponderación en los elementos padre, regla que no aplica a los elementos hijo aunque este tenga mayor numeración.</p> <pre><code><span class="hljs-selector-class">.purpure</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">40px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">20px</span>; <span class="hljs-attribute">background</span>: purpure; <span class="hljs-attribute">z-index</span>: <span class="hljs-number">8</span>; } <span class="hljs-selector-class">.black</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">40px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">20px</span>; <span class="hljs-attribute">background</span>: black; <span class="hljs-attribute">z-index</span>: <span class="hljs-number">6</span>; } <span class="hljs-selector-class">.yellow</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">20px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">20px</span>; <span class="hljs-attribute">background</span>: yellow; <span class="hljs-attribute">z-index</span>: <span class="hljs-number">9</span>; }</style>