Para cualquier elemento en el que se haga clic en la pila, se debe asignar al elemento de destino un índice z más alto que todos los anteriores en el DOM. Entonces debería translateY() píxeles hasta el primer elemento.
El resultado deseado es que el elemento de destino se sitúe encima del primer elemento del padre. Sin embargo, hay un error en el que parece que algunos elementos obtienen un índice z más bajo. Si esto también pudiera refactorizarse mejor, ¿cómo podría mejorarse?
const divs = document.querySelectorAll("div"); divs.forEach((div) => { div.addEventListener("click", (event) => { let i = 0; let previous_sibling = event.target.previousElementSibling; while (previous_sibling != null) { i++; previous_sibling = previous_sibling.previousElementSibling; } event.target.style.cssText = ` position: relative; z-index: ${i + 1}; transform: translateY(-${i * 45}px); `; }) }) .box { width: 300px; height: 45px; /* border: 1px solid; */ margin: auto; } section { margin-top: 50px; } div { transition: transform .75s linear; } #box1 { background: red; } #box2 { background: blue; } #box3 { background: green; } #box4 { background: orange; } #box5 { background: purple; } #box6 { background: teal; } <section> <div class="box" id="box1">1</div> <div class="box" id="box2">2</div> <div class="box" id="box3">3</div> <div class="box" id="box4">4</div> <div class="box" id="box5">5</div> <div class="box" id="box6">6</div> <div class="box" id="box1">7</div> <div class="box" id="box2">8</div> <div class="box" id="box3">9</div> <div class="box" id="box4">10</div> <div class="box" id="box5">11</div> <div class="box" id="box6">12</div> </section>Actualmente, el z-index se calcula mediante la posición DOM de los elementos debido al uso de previousElementSibling y el contador simple. Dado que translateY no cambia la posición de los elementos en el DOM, nunca pueden estar fuera de servicio. Por ejemplo, el número 3 nunca puede estar encima del 4 porque nunca está en el DOM. Para cambiar este comportamiento, simplemente puede almacenar el z-index más alto (aquí en el conjunto de dataset de la section ) y reutilizarlo/agregarlo.
const divs = document.querySelectorAll("div"); divs.forEach((div) => { div.addEventListener("click", (event) => { //REM: Get the highest z-index let tCurrentZ = ~~div.parentNode.dataset.zindex; let i = 0; let previous_sibling = event.target.previousElementSibling; while (previous_sibling != null) { i++; previous_sibling = previous_sibling.previousElementSibling; } event.target.style.cssText = ` position: relative; z-index: ${tCurrentZ}; transform: translateY(-${i * 45}px); `; //REM: Increase the highest z-index div.parentNode.dataset.zindex = tCurrentZ + 1 }) }) .box { width: 300px; height: 45px; /* border: 1px solid; */ margin: auto; } section { margin-top: 50px; } div { transition: transform .75s linear; } #box1 { background: red; } #box2 { background: blue; } #box3 { background: green; } #box4 { background: orange; } #box5 { background: purple; } #box6 { background: teal; } <section> <div class="box" id="box1">1</div> <div class="box" id="box2">2</div> <div class="box" id="box3">3</div> <div class="box" id="box4">4</div> <div class="box" id="box5">5</div> <div class="box" id="box6">6</div> <div class="box" id="box1">7</div> <div class="box" id="box2">8</div> <div class="box" id="box3">9</div> <div class="box" id="box4">10</div> <div class="box" id="box5">11</div> <div class="box" id="box6">12</div> </section>