Platzi
Platzi

LA EDUCACIÓN ES UN REGALO ¡ACCEDE AL PRECIO ESPECIAL!

Antes: $249
$149
Currency
Antes: $249
Ahorras: $100
COMIENZA AHORA
Termina en: 16D : 17H : 37M : 28S

Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Maquetando a nuestros conejitos en Animationland: contexto de apilamiento

3/12
Recursos

Aportes 58

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

También les dejo este gif que hice que les explica de forma un poquito más visual cómo funciona el contexto de apilamiento en Animationland 👀👇
.

Hola ! Un pequeño aporte,no es necesariamente del tema pero puede ayudar.Cuando hagamos los divs enumerados para los layers,podemos usar el atajo emmet para que sea mas rapido el escribir el html.
solo escriben esto y le dan tab.

 .layer-$*10

https://docs.emmet.io/

Emmet

div.phone>div.layer-$*10

RETO



Listo! todavía no tiene la forma de los conejos y esas cosas pero vamos bien!

En el navegador microsoft edge existe una manera de ver la posición en el eje Z desde las dev-tools, sólo le tienes que dar al cuadrito de la derecha de la propiedad z-index en los estilos y te abrirá un visor 3D como el siguiente…

Heyy chicos, por si alguno necesita ayuda en la maquetación de nuestro proyecto aquí les dejare mi código para poder continuar el curso sin ningún problema 😃

<!DOCTYPE html>
<html lang="en">
<head>
    <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>

        body{
            margin: 0;
            height: 100vh;
            width: 100%;
            display: grid;
            place-items: center;
        }

        .phone{
            position: relative;
            border: 9px solid black;
            border-radius: 40px;
            height: 600px;
            width: 300px;
            background: #ccefff;
            box-shadow: 0 19px 38px rgb(0, 0, 0,0.30), 
            0 15px 12px rgb(0, 0, 0,0.22);
            
        }
        .layer-1{
            position: absolute;
            z-index: 1;
            height: 450px;
            width: 80px;
            background: white;
            bottom: 0;
            right: 60px;

        }
        .layer-2{
            position: absolute;
            z-index: 2;
            height: 450px;
            width: 80px;
            background: white;
            bottom: 0;
            left: 60px;
        }
        .layer-3{
            position: absolute;
            z-index: 3;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 220px;
            height: 400px;
            background: pink;
            bottom: 0;
        }
        .layer-4{
            position: absolute;
            z-index: 4;
            height: 360px;
            width: 80px;
            background: white;
            bottom: 0;
            left: 50px;
        }
        .layer-5{
            position: absolute;
            z-index: 5;
            left: 0;
            width: 220px;
            height: 290px;
            background: rgb(171, 171, 171);
            border-bottom-left-radius: 40px;
            bottom: 0;
        }
        .layer-6{
            position: absolute;
            z-index: 6;
            height: 230px;
            width: 80px;
            background: white;
            bottom: 0;
            right: 40px;
        }
        .layer-7{
            position: absolute;
            z-index: 7;
            right: 0;
            width: 170px;
            height: 180px;
            background: pink;
            border-bottom-right-radius: 30px;
            bottom: 0;
        }
        .layer-8{
            position: absolute;
            z-index: 8;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 170px;
            height: 90px;
            background: rgb(0, 21, 255);
            bottom: 0;
        }
        .layer-9{
            position: absolute;
            z-index: 9;
            left: 0;
            width: 100px;
            height: 100px;
            background: pink;
            border-bottom-left-radius: 30px;
            bottom: 0;
        }
        .layer-10{
            position: absolute;
            z-index: 10;
            right: 0;
            width: 100px;
            height: 70px;
            background: rgb(105, 105, 105);
            border-bottom-right-radius: 30px;
            bottom: 0;

        }
    </style>
</head>
<body>
    <div class="phone">
        <div class="layer-1"></div>
        <div class="layer-2"></div>
        <div class="layer-3"></div>
        <div class="layer-4"></div>
        <div class="layer-5"></div>
        <div class="layer-6"></div>
        <div class="layer-7"></div>
        <div class="layer-8"></div>
        <div class="layer-9"></div>
        <div class="layer-10"></div>
    </div>
</body>
</html>

Les dejo un descubrimiento que hice: para este caso, colocar los z-index no es necesario
.
Esto se debe al propio contexto de apilamiento de CSS, por defecto, el orden en el que coloquemos los elementos hijos en el HTML hará que se organicen de esta manera, así que en el caso que nos corresponde

<div class="phone">
        <div class="layer-1"></div>
        <div class="layer-2"></div>
        <div class="layer-3"></div>
        <div class="layer-4"></div>
        <div class="layer-5"></div>
        <div class="layer-6"></div>
        <div class="layer-7"></div>
        <div class="layer-8"></div>
        <div class="layer-9"></div>
        <div class="layer-10"></div>
    </div>

Al colocarlos en este orden por defecto layer-2 quedará por encima de layer-1, layer-3 por encima de layer-2 y de layer-1 y así sucesivamente. Lo que en este caso que estamos trabajando haría que el z-index por defecto coincida con el z-index que estabamos agregando manualmente, lo cual lo hace redundante.

Reto cumplido!!
Trate de que se redujeran las lineas codigo y además fuera más entendible con el uso de variables, se pudo reducir más pero lo deje ahí. me gustaría feedback, Gracias 😄
Link: https://codepen.io/paolojoaquin/pen/zYZPOyV

Listo !

Reto completado

Reto cumplido

Primer paso!

Quise crear mi propia versión de animationland, en mi caso le llamé Pinguiland 🤪

Hola chicos, les dejo mi reto y con código como lo tienen la maestras.

<!DOCTYPE html>
<html lang="en">

<head>
  <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>
    body {
      margin: 0;
      height: 100vh;
      width: 100%;
      display: grid;
      place-items: center;
    }

    .phone {
      position: relative;
      border: 8px solid black;
      border-radius: 40px;
      height: 600px;
      width: 300px;
      background-color: #CCEFFF;
      box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
    }

    .layer {
      position: absolute;
      height: 450px;
      width: 80px;
      background-color: white;
      border-radius: 20px;

    }

    .land {
      position: absolute;
      width: 220px;
      height: 400px;
      bottom: 0;
      background-color: #B7584D;
      border-top: #58BD60 10px solid;
      border-radius: 20px 20px 0 0;
      box-shadow: 2px 4px 10px black;
    }

    .layer-1 {
      z-index: 1;
      bottom: 0;
      right: 60px;
    }

    .layer-2 {
      z-index: 2;
      bottom: 0;
      left: 60px;
    }

    .layer-3 {
      z-index: 3;
      left: 0;
      right: 0;
      margin: 0 auto;

    }

    .layer-4 {
      z-index: 4;
      bottom: 0;
      left: 30px;
      height: 350px;
      border-radius: 20px 20px 0 30px;
    }

    .layer-5 {
      z-index: 5;
      height: 300px;
      width: 190px;

      border-radius: 20px 20px 0 30px;
    }

    .layer-6 {
      z-index: 6;
      bottom: 0;
      right: 30px;
      height: 250px;
    }

    .layer-7 {
      z-index: 7;

      right: 0;
      height: 200px;
      width: 190px;
      border-radius: 20px 20px 30px 0;
    }

    .layer-8 {
      position: absolute;
      z-index: 8;
      bottom: 0;

      right: 0;
      left: 0;
      margin: 0 auto;

      width: 125px;
      height: 100px;
      background-color: #57BD60;
      border-radius: 50px 50px 0 0;

    }

    .layer-9 {
      position: absolute;
      z-index: 9;
      bottom: 0;
      left: 0;

      width: 125px;
      height: 110px;
      background-color: white;
      border-radius: 0 50px 0 30px;

    }

    .layer-10 {
      position: absolute;
      z-index: 10;
      bottom: 0;
      right: 0;

      width: 125px;
      height: 110px;
      background-color: white;
      border-radius: 50px 0 30px 0;

    }
  </style>
</head>

<body>
  <div class="phone">
    <div class="layer layer-1"> </div>
    <div class="layer layer-2"> </div>
    <div class="land layer-3"> </div>
    <div class="layer layer-4"> </div>
    <div class="land layer-5"> </div>
    <div class="layer layer-6"> </div>
    <div class="land layer-7"> </div>
    <div class=" layer-8"> </div>
    <div class=" layer-9"> </div>
    <div class=" layer-10"> </div>
  </div>
</body>

</html>

Listo ya solo falta la animación

Listo 😁.

![](

Por ahora mi arbusto será azul😂. Me esta encantando este curso

Si vienen del desarroollo de videojuegos, esto es más fácil que yo en tiempos de covid.
Digo, es bastante sencillo.

Me emocione entre esta y la siguiente clase y termine haciendo el dibujo de Kirby y deje dos conejitos (me encariñe con el dibujo xd ❤️)

<!DOCTYPE html>
<html lang="en">
<head>
    <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>Contexto de apilamiento</title>
</head>
<style>
    body {
        margin:0;
        height:100vh;
        width: 100%;
        display: grid;
        place-items: center;
    }

    .phone{
        position: relative;
        border: 8px solid black;
        border-radius: 20px;
        width: 300px;
        height: 600px;
        background: #CCEFFF;
        box-shadow: 0 19px 38px rgba(0,0,0,0.3), 0 15px 12px rgba(0,0,0,0.22);
    }

    .layer-1{
        position:absolute;
        z-index:1;
        height: 450px;
        width: 80px;
        background: white;
        bottom: 0;
        right: 60px;
    }

    .layer-2{
        position:absolute;
        z-index:2;
        height: 450px;
        width: 80px;
        background: white;
        bottom: 0;
        left: 60px;
    }

    .layer-3{
        position:absolute;
        z-index:3;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 220px;
        height: 400px;
        background: wheat;
        bottom: 0;

    }

    .layer-4{
        position:absolute;
        z-index:4;
        height: 350px;
        width: 80px;
        background: white;
        bottom: 0;
        left: 50px;
    }

    .layer-5{
        position:absolute;
        z-index:5;
        margin: 0 auto;
        width: 220px;
        height: 300px;
        background: gray;
        bottom: 0;
        left: 0;
        
    }

    .layer-6{
        position:absolute;
        z-index:6;
        height: 250px;
        width: 80px;
        background: white;
        bottom: 0;
        right: 20px;
    }

    .layer-7{
        position:absolute;
        z-index:7;
        margin: 0 auto;
        width: 220px;
        height: 200px;
        background: palegoldenrod;
        bottom: 0;
        right: 0;
    }

    .layer-8{
        position:absolute;
        z-index:8;
        width: 120px;
        height: 100px;
        background: palevioletred;
        bottom: 0;
        left: 0;
    }

    .layer-9{
        position:absolute;
        z-index:9;
        margin: 0 auto;
        width: 180px;
        height: 120px;
        background: lawngreen;
        bottom: 0;
        right: 0;
        left: 0;
    }

    .layer-10{
        position:absolute;
        z-index:10;
        width: 100px;
        height: 100px;
        background: olive;
        bottom: 0;
        right: 0;
    }

    
</style>
<body>
    <div class="phone">
        <div class="layer-1"></div>
        <div class="layer-2"></div>
        <div class="layer-3"></div>
        <div class="layer-4"></div>
        <div class="layer-5"></div>
        <div class="layer-6"></div>
        <div class="layer-7"></div>
        <div class="layer-8"></div>
        <div class="layer-9"></div>
        <div class="layer-10"></div>
    </div>
</body>
</html>

Reto cumplido

Aqui les dejo mi reto, lo hice en Halloween y me inspire en SquideGame!
Code here: https://codepen.io/anna_albirena/pen/WNEEdyX

Aunque el curso está enfocado en animación con CSS, es el primer curso dónde empleo de forma fácil las famosas posiciones relativas y absolutas sin batallar tanto 😅

Si queremos ahorrarnos líneas de código, siempre es importante conocer los selectores de CSS. Podemos usar …[class^=‘layer’]… para seleccionar todas las clases que inicien con la cadena de texto ‘layer’. Así le asignamos a todas al mismo tiempo la posición absoluta.

Estuve una hora haciéndolo xD pero valió totalmente la pena, no sabía las posibilidades de CSS para poder dibujar

Así mi versión de momento

Yo pensaría que el lejos sería un z-index: 0 y el z-index cercano de 6 para que aparezca hasta arriba, “esto lo comento antes de iniciar la clase”

![](

bastante lo-fi
![]()

Mi forma de completar el reto (aunque es muy sencillo)

Así va por el momento:

Creo que los conejos estarían en la capa de más atrás, pero no sé si la propiedad permite valores negativos.
Sería conejo de arriva Z index 0, y nuve Z index 10

css

.phone{
    width: 300px;
    height: 600px;
    position: relative;
    border: 8px solid black;
    border-radius: 30px;
    background: #CCEFFF;
    overflow: hidden;
    box-shadow: 0 19px 38px rgba(0,0,0,0.3), 0 15px 12px rgba(0,0,0,0.22);
}
.layer-1{
    position: absolute;
    height: 450px;
    width: 80px;
    z-index: 1;
    bottom: 0;
    right: 60px;
    background: white;
    border-radius: 40px;
}
.layer-2{
    position: absolute;
    height: 450px;
    width: 80px;
    z-index: 2;
    bottom: 0;
    left: 60px;
    background: #ffffff;
    border-radius: 40px;
}

.layer-3{
    position: absolute;
    height: 400px;
    width: 220px;
    z-index: 3;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    background: #6d4b1a;
    border-top: 15px solid #3b8d1b;
    border-radius: 10px;
}
.layer-4{
    position: absolute;
    height: 350px;
    width: 80px;
    z-index: 4;
    bottom: 0;
    left: 60px;
    background: white;
    border-radius: 40px;
}
.layer-5{
    position: absolute;
    height: 300px;
    width: 200px;
    z-index: 5;
    bottom: 0;
    left: 0;
    background: #7a541a;
    border-top: 15px solid #50ad2c;
    border-radius: 10px;
}
.layer-6{
    position: absolute;
    height: 250px;
    width: 80px;
    z-index: 6;
    bottom: 0;
    right: 45px;
    background: white;
    border-radius: 40px;
}
.layer-7{
    position: absolute;
    height: 200px;
    width: 170px;
    z-index: 7;
    bottom: 0;
    right: 0;
    background: #996920;
    border-top: 15px solid #5ac031;
    border-radius: 10px;
}
.layer-8{
    position: absolute;
    height: 100px;
    width: 200px;
    z-index: 8;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    background: rgb(62, 128, 73);
}
.layer-9{
    position: absolute;
    height: 80px;
    width: 100px;
    z-index: 9;
    bottom: 0;
    right: 0;
    background: white;
}
.layer-10{
    position: absolute;
    height: 80px;
    width: 100px;
    z-index: 9;
    bottom: 0;
    left: 0;
    background: white;
} 

DONE!

Asi me va quedando!

Tengo un conejito rebelde y pelon, que buen proyecto jajaja me entretuve un buen rata haciendo esto con sass 😄


Así me quedó! 😄

en el layer inicial el que contiene todo, sobre la clase phone utilizar la propiedad overflow:hidden, esto para quitar les esquinas en la parte inferior.

reto

Si usas emmet puedes crear los layers usando el siguiente código:

pa poner doble clase con emmet, ósea así class="layer layer-1"
hay que poner .layer.layer-$ uwu

Me ha gustado mucho esta clase :3

Reto completado:

.layer-1 {
    z-index: 1;
    @include rabbit(450px, 160px, 0);
}
.layer-2 {
    z-index: 2;
    @include rabbit(450px, 60px, 0);
}
.layer-3 {
    z-index: 3;
    @include hill(220px, 400px, 0, 0, 0, 0, wheat);
    margin: 0 auto;
}
.layer-4 {
    position: absolute;
    z-index: 4;
    @include rabbit(345px, 30px, 0);
}
.layer-5 {
    z-index: 5;
    @include hill(220px, 300px, 0, 0, 30px, 0,gray);
}
.layer-6 {
    z-index: 6;
    @include rabbit(250px, 175px, 0);
}
.layer-7 {
    z-index: 7;
    @include hill(200px, 210px, 100px, 0, 0, 30px, salmon);
}
.layer-8 {
    z-index: 8;
    @include bush(120px, 100px, 0, 0, 0, 0, MediumSeaGreen);
    margin: 0 auto;
}
.layer-9 {
    z-index: 9;
    @include bush(100px, 80px, 200px, 0, 0, 30px, OldLace);
}
.layer-10 {
    z-index: 10;
    @include bush(100px, 80px, 0px, 0, 30px, 0, OldLace);
}

MIXINS:

@mixin rabbit($alto, $izq, $der) {
    position: absolute;
    background: white;
    width: 80px;
    height: $alto;
    bottom: 0;
    left: $izq;
    right: $der;
}

@mixin hill($ancho, $alto, $izq, $der, $esquinai, $esquinad, $fondo) {
    position: absolute;
    width: $ancho;
    height: $alto;
    left: $izq;
    right: $der;
    bottom: 0;
    border-bottom-left-radius: $esquinai;
    border-bottom-right-radius: $esquinad;
    background: $fondo;
}

@mixin bush($ancho, $alto, $izq, $der, $esquinai, $esquinad, $fondo) {
    position: absolute;
    width: $ancho;
    height: $alto;
    left: $izq;
    right: $der;
    bottom: 0;
    border-bottom-left-radius: $esquinai;
    border-bottom-right-radius: $esquinad;
    background: $fondo;
}

He realizado el reto.

.layer-1{
      position: absolute;
      z-index: 1;
      height: 450px;
      width: 80px;
      background: white;
      bottom: 0;
      right: 60px;
    }
    .layer-2{
      position: absolute;
      z-index: 2;
      height: 450px;
      width: 80px;
      background: white;
      bottom: 0;
      left: 60px;

    }
    .layer-3{
      position: absolute;
      z-index: 3;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 220px;
      height: 400px;
      background: brown;
      bottom: 0;
    }
    .layer-4{
      position: absolute;
      z-index: 4;
      height: 380px;
      width: 80px;
      background: white;
      bottom: 0;
      left: 50px;

    }
    .layer-5{
      position: absolute;
      z-index: 5;
      left: 0;
      right: 20px;
      width: 220px;
      height: 320px;
      background: black;
      bottom: 0;
    }
    .layer-6{
      position: absolute;
      z-index: 6;
      height: 280px;
      width: 80px;
      background: white;
      bottom: 0;
      left: 180px;
    }
    .layer-7{
      position: absolute;
      z-index: 7;
      left: 0;
      left: 120px;
      
      width: 180px;
      height: 210px;
      background: lightseagreen;
      bottom: 0;
    }
    .layer-8{
      position: absolute;
      z-index: 8;
      right: 0;
      left: 0;
      margin: 0 auto;
      width: 150px;
      height: 100px;
      background-color:violet ;
      bottom: 0;
    }
    .layer-9{
      position: absolute;
      z-index: 9;
      width:100px ;
      height: 80px;
      background: lightyellow;
      bottom: 0;
    }
    .layer-10{
      position: absolute;
      z-index: 10;
      width:100px ;
      height: 80px;
      left: 200px;
      background: limegreen;
      bottom: 0;
    }

Para que no se le agreguen a cada una de las capas el bottom: 0;, una buena practica es que cada todos los elementos tengan una clase general y en el caso de los conejos, una clase particular, por ejemplo:
.
HTML

<body>
  <main class="phone">
    Animationland
    <div class="layer one">Layer-</div>
    <div class="layer two">Layer-</div>
    <div class="layer three">Layer-</div>
    <div class="layer four">Layer-</div>
    <div class="layer five">Layer-</div>
    <div class="layer six">Layer-</div>
    <div class="layer seven">Layer-</div>
    <div class="layer eight">Layer-</div>
    <div class="layer nine">Layer-</div>
    <div class="layer ten">Layer-</div>
  </main>
</body>

Aquí todos los elementos tienen la clase layer, además de su clase particular

Si van a hacer listados, el counter-reset también les sirve para eso

.
HTML

<ul>
  <li class="layer">
    Layer-
  </li>
  <li class="layer">
    Layer-
  </li>
  <li class="layer">
    Layer-
  </li>
  <li class="layer">
    Layer-
  </li>
  <li class="layer">
    Layer-
  </li>
  <li class="layer">
    Layer-
  </li>
  <li class="layer">
    Layer-
  </li>
  <li class="layer">
    Layer-
  </li>
</ul>

CSS

body{
  counter-reset: i;
}
.layer::after{
  counter-increment: i;
  content: counter(i);
}

.

Tratando de lograr el reto, espero que les gute

La propiedad CSS z-index indica el orden de un elemento posicionado y sus descendientes. Cuando varios elementos se superponen, los elementos con mayor valor z-index cubren aquellos con menor valor.

Un atajo para escribir los 10 div cada uno con su respectiva clase
.layer-$*10

Reto completado

Por si se atoran, aquí esta el código que se utiliza en la clase

Hay vamos!

Código:

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
        body {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            height: 100vh;
            width: 100%;
            display: grid;
            place-items: center;
        }
        .phone {
            position: relative;
            border: 8px solid black;
            border-radius: 40px;
            height: 600px;
            width: 300px;
            background: #ccefff;
            box-shadow: 0 19px 39px rgba(0, 0, 0, .4);
            z-index: 11;
        }
        .layer-1 {
            position: absolute;
            z-index: 1;
            height: 200px;
            width: 80px;
            background: chartreuse;
            bottom: 250px;
            right: 60px;
        }
        .layer-2 {
            position: absolute;
            z-index: 2;
            height: 200px;
            width: 80px;
            background: chartreuse;
            bottom: 250px;
            left: 60px;
        }
        .layer-3 {
            position: absolute;
            z-index: 3;
            left: 0;
            right: 0;
            margin: 0 auto;
            background: chocolate;
            width: 220px;
            height: 300px;
            bottom: 100px;
        }
        .layer-4 {
            position: absolute;
            z-index: 4;
            height: 200px;
            width: 80px;
            background: chartreuse;
            left: 50px;
            bottom: 150px;
        }
        .layer-5 {
            position: absolute;
            z-index: 5;
            background: chocolate;
            width: 200px;
            height: 250px;
            bottom: 50px;
            left: 0;
            border: 2px solid black;
        }
        .layer-6 {
            position: absolute;
            z-index: 6;
            height: 200px;
            width: 80px;
            background: chartreuse;
            bottom: 0;
            right: 30px;
        }
        .layer-7 {
            position: absolute;
            z-index: 7;
            width: 150px;
            height: 100px;
            bottom: 50px;
            right: 0;
            background: chocolate;
            border: 2px solid black;
        }
        .layer-8 {
            position: absolute;
            z-index: 8;
            margin: 0 auto;
            width: 200px;
            height: 100px;
            left: 0;
            right: 0;
            bottom: 0;
            background: pink;
        }
        .layer-9 {
            position: absolute;
            z-index: 9;
            width: 100px;
            height: 80px;
            bottom: 0;
            left: 0;
            background: white;
        }
        .layer-10 {
            position: absolute;
            z-index: 10;
            width: 100px;
            height: 80px;
            bottom: 0;
            right: 0;
            background: white;
        }
    </style>
</head>
<body>
    <div class="phone">
        <div class="layer-1"></div>
        <div class="layer-2"></div>
        <div class="layer-3"></div>
        <div class="layer-4"></div>
        <div class="layer-5"></div>
        <div class="layer-6"></div>
        <div class="layer-7"></div>
        <div class="layer-8"></div>
        <div class="layer-9"></div>
        <div class="layer-10"></div>
    </div>
</body>
</html>

Reto Cumplido!!!

El contexto de apilamiento en este caso es reconocer cada elemento del escenario y ubicarlo en una capa respectiva identificando el orden de la posición z de cada una (desde el fondo hasta el frente)