可見元素之上的透明元素

Question

有沒有辦法讓透明元素出現在可見元素之上？ 我希望透明的 NAV2 像 NAV1 一樣位於黃色方塊之上，盡管它是透明的。我需要導航是透明的，當你點擊它下面的按鈕 go 時出現的方塊。

謝謝你！

這是代碼：

 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>

Answer 1

您要查看頁面背景嗎？ 這不可能。 但是你可以使用 z-index: n; 將透明元素 n 層移動到其他元素之上。 你看不到這個，但它在上面。