Z 索引按钮不可单击

Question

我对一个小问题感到恼火。当我修改按钮的 z-index css 属性时(因为在滚动时它们在我的顶部导航栏和页脚上重叠(，它们是不可点击的，就像按钮上有东西一样。如何解决这个问题？

这是我的按钮：

<button class="btn waves-effect waves-light"><i class="small material-icons">add</i></button>

这是 CSS：

.waves-effect {
position: relative;
cursor: pointer;
display: inline-block;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
z-index: 0;
transition: .3s ease-out;
}
materialize3.css:5259
.btn, .btn-large {
text-decoration: none;
color: #fff;
background-color: #0091ea;
text-align: center;
letter-spacing: .5px;
transition: .2s ease-out;
cursor: pointer;
margin-left: 5px;
}
materialize3.css:5241
.btn, .btn-large, .btn-floating, .btn-large, .btn-flat {
font-size: 1rem;
outline: 0;
}
materialize3.css:5187
.btn, .btn-large, .btn-flat {
border: none;
border-radius: 2px;
display: inline-block;
height: 36px;
line-height: 36px;
padding: 0 2rem;
text-transform: uppercase;
vertical-align: middle;
-webkit-tap-highlight-color: transparent;

Answer 1

您可能

正在尝试为 z 索引提供负值，导致其他div 与按钮重叠并使其不可单击。相反，请尝试为导航栏和页脚提供一个正值(大于按钮的 z 索引值(。

没有足够的代码进行调试。使用工作模型描述您的问题，您可能会解决问题。