Tengo múltiples (solo 2 en este ejemplo) divs que se superponen entre sí...
Lo que me gustaría hacer es agregar botones que representen cada div, que al hacer clic en ellos deberían aumentar el índice z de sus respectivos div solo durante 1000 ms, para estar al tanto de todos los demás div superpuestos. Este es el único propósito del aumento en el índice z.
Pude hacer una parte de esto, sin embargo, en la segunda ronda de clics, los divs secundarios siguen escondiéndose detrás del div que originalmente estaba en la parte superior.
Verifique y ejecute el fragmento a continuación:
function increaseDivOne() { const box = document.getElementById('Div1'); box.style.zIndex = '999'; setTimeout(function () { box.style.zIndex = '1'; }, 1000); } function increaseDivTwo() { const box = document.getElementById('Div2'); box.style.zIndex = '999'; setTimeout(function () { box.style.zIndex = '1'; }, 1000); } #Div1 { position: absolute; width: 300px; height: 150px; background-color: lightblue; border: 1px solid black; } #Div2 { position: relative; top: 130px; left: 30px; width: 300px; height: 150px; background-color: coral; border: 1px solid black; } <button onclick="increaseDivTwo()">Increase Div 2</button> <br><br> <button onclick="increaseDivOne()">Increase Div 1</button> <ul>Try this:</ul> <li>Click "Increase Div 2"</li> <li>Click "Increase Div 1"</li> <li>Click "Increase Div 2" again and notice it will show up but will hide behind Div1 after 1s</li> <p>My goal is to raise the z-index of a div for 1s, just enough to be on top of the other div and vice versa, but it should stay on top after the 1s set timeout. <br> Please note there's more Div in my actual project that will utilize this function.</p> <div id="Div2"> <h1>Div 2</h1> </div> <div id="Div1"> <h1>Div 1</h1> </div>Gracias de antemano por cualquier ayuda.
De la discusión en los comentarios, creo que sería suficiente si simplemente reinicia el índice z para el que está actualmente en la parte superior, cuando se necesita mover uno nuevo al frente, sin ningún temporizador.
Puede recorrer todos los elementos div relevantes, o simplemente recordar el anterior en una variable, y luego restablecer el índice z específicamente solo para eso.
Y luego también sería un poco mejor, si no manipulamos los estilos en línea para esto, sino que simplemente configuramos una clase para aplicar el índice z necesario al elemento actualmente "activo".
var previous = null; function increaseDiv(num) { if(previous) { previous.classList.remove('active'); } var div = document.getElementById('Div'+num); div.classList.add('active'); previous = div; } #Div1 { position: absolute; width: 300px; height: 150px; background-color: lightblue; border: 1px solid black; } #Div2 { position: relative; top: 130px; left: 30px; width: 300px; height: 150px; background-color: coral; border: 1px solid black; } div.active { z-index: 999; } <button onclick="increaseDiv('2')">Increase Div 2</button> <br><br> <button onclick="increaseDiv('1')">Increase Div 1</button> <div id="Div2"> <h1>Div 2</h1> </div> <div id="Div1"> <h1>Div 1</h1> </div>si los divs obtuvieron el mismo índice, entonces el orden de los childnodes toma la prioridad de visualización, ese es el problema aquí, para mantener la prioridad en el último div seleccionado, debe reescribir su función de la siguiente manera:
function increaseDivOne() { const box = document.getElementById('Div1'); box.style.zIndex = '999'; setTimeout(function () { box.style.zIndex = '1'; var elms=document.querySelectorAll('div[id^="Div"]:not(#Div1)'); for (var p in elms) { elms[p].style.zIndex=-1; } }, 1000); }