html - Z-index 按钮不可点击

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-index 一个负值，导致其他 div 与按钮重叠并使其不可点击。相反，请尝试为导航栏和页脚提供一个正值(大于按钮的 z-index 值)。

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