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值）。

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

Z-index按钮无法点击

1 个答案: