Is there a way to make a transparent element appear on top of a visible element? I want NAV2 that is transparent to be on top of the yellow square like NAV1 does despite being transparent.I need the nav to be transparent and the square that appears when you click on the button to go beneath it.
Thank you!
Here is the code:
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>Do you want to see the page Background? This is not possible. But you can use z-index: n; to move your transparent Element n layers above the others. You can't see this but it's above.