按鈕溢出無法正常工作？

Question

顯然我有一個overflow屬性的小問題。我目前正在研究一個名爲uix的抽象UI框架。問題本身與用戶每次點擊按鈕時產生的波浪效果有關。查看Github Pages頁面，並嘗試將border-radius設置爲比3px更高的金額。正如你可能注意到，overflow只要波將擊中按鈕元素的邊緣不會工作。

完整的源代碼可在Project Page。

我正在使用下面的代碼來創建波浪行爲。

.btn { 
    display: inline-block; 
    min-width: $button-min-width; 
    border-radius: $button-border-radius; 
    overflow: hidden; 
    cursor: pointer; 
    ... 
} 

.wave { 
    display: none; 
    position: absolute; 
    border-radius: 50%; 
    padding: 50% 0; 
    height: auto; 
    width: 100%; 
    ... 

    &.wave-in {  
    display: inline-block; 
    animation: $wave-animation; 
    ... 

uix.element(".btn").each(function(el) { 
    el.onmousedown = function(e) { 

    uix.element(this).addClass("waving"); 

    var rect = this.getBoundingClientRect(); 
    // Create child span element for wave effect: 
    var span = document.createElement("span"); 
    span.className = "wave"; 
    Object.assign(span.style, { 
     "left": (e.clientX - rect.left - (rect.width/2)) + "px", 
     "top": (e.clientY - rect.top - (rect.width/2)) + "px" 
    }); 
    this.appendChild(span); 

    // Add button wave animation: 
    uix.element(span).addClass("wave-in"); 

    // Remove span after animation ends: 
    setTimeout(function() { 
     uix.element(this).removeClass("waving"); 
     span.remove(); 
     delete span; 
    }, 800); 

    } 
}); 

Answer 1

退房這樣的回答：https://stackoverflow.com/a/35251771/2565294

添加z-index: 1;到.btn，作爲回答表明，這個修復該問題。