¿Hay alguna manera de hacer que un elemento transparente aparezca encima de un elemento visible? Quiero que NAV2 que sea transparente esté encima del cuadrado amarillo como lo hace NAV1 a pesar de ser transparente. Necesito que el navegador sea transparente y que el cuadrado que aparece cuando haces clic en el botón vaya debajo de él.
¡Gracias!
Aquí está el código:
buttons = document.querySelectorAll('button'); elements = document.querySelectorAll('.element'); buttons.forEach((button, i) => { button.addEventListener('click', function() { elements[i].classList.add('animate-element'); }) }); elements.forEach(element => element.addEventListener('animationend', function() { element.classList.remove('animate-element'); })) .nav1, .nav2 { position: relative; width: 100vw; height: 20vh; color: white; } .nav1 { background: red; } .nav2 { border: 2px solid black; } button { margin-top: 10px; } .button1 { margin-bottom: 120px; } .element1, .element2 { position: absolute; width: 100px; height: 80px; background: yellow; bottom: -105%; right: 5%; opacity: 0; z-index: -1; } .animate-element { animation: animate 1.2s ease forwards; } @keyframes animate { 0% { transform: scale(0); opacity: 1; } 35% { transform: scale(1); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1) translateY(-140%); opacity: 1; } } <div class="nav1"> <div class="element1 element"></div> NAV1 </div> <button class="button1">Button1</button> <div class="nav2"> NAV2 <div class="element2 element"></div> </div> <button class="button1">Button2</button>¿Quieres ver la página Fondo? Esto no es posible. Pero puedes usar z-index: n; para mover su elemento transparente n capas por encima de los demás. No puedes ver esto, pero está arriba.