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
<metacharset="“UTF-8”"><metahttp-equiv="“X-UA-Compatible”"content="“IE=edge”"><metaname="“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><spanclass="hljs-selector-class">.purpure</span> { <spanclass="hljs-attribute">width</span>: <spanclass="hljs-number">40px</span>; <spanclass="hljs-attribute">height</span>: <spanclass="hljs-number">20px</span>; <spanclass="hljs-attribute">background</span>: purpure; <spanclass="hljs-attribute">z-index</span>: <spanclass="hljs-number">8</span>; } <spanclass="hljs-selector-class">.black</span> { <spanclass="hljs-attribute">width</span>: <spanclass="hljs-number">40px</span>; <spanclass="hljs-attribute">height</span>: <spanclass="hljs-number">20px</span>; <spanclass="hljs-attribute">background</span>: black; <spanclass="hljs-attribute">z-index</span>: <spanclass="hljs-number">6</span>; } <spanclass="hljs-selector-class">.yellow</span> { <spanclass="hljs-attribute">width</span>: <spanclass="hljs-number">20px</span>; <spanclass="hljs-attribute">height</span>: <spanclass="hljs-number">20px</span>; <spanclass="hljs-attribute">background</span>: yellow; <spanclass="hljs-attribute">z-index</span>: <spanclass="hljs-number">9</span>; }</style>
