Css 按钮溢出不能正常工作？

显然我对

overflow

属性有一个小问题。我目前正在开发一个名为的抽象UI框架。问题本身与用户单击按钮时产生的波浪效应有关。查看页面，尝试将

边框半径设置为大于
3px
。正如您可能注意到的，
溢出
不会在波浪撞击按钮元素的边缘时立即工作

完整的源代码可在

我使用以下代码来创建波浪行为

.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;
    ...


看看这个答案：

添加
z-index:1
到
.btn
，正如答案所示，这解决了问题。
确实解决了。我想我已经试过了。但是不小心在
span.wave
元素上尝试了它。无论什么非常感谢。
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);

  }
});