声明z-index后无法点击按钮？

Question

在我给按钮设置z-index之后，我无法点击它。它会覆盖在我的侧边导航栏上，我不知道为什么，有任何建议都可以：)。 即使z-index=-1，如何使它可点击？

我的代码：

<div class="col-lg-1 col-lg-offset-0 col-xs-4"  >
  <span class="glyphicon glyphicon-heart" id="lovehate" style="left:17px; top:20px;" ></span>
  <a href="{{route('lovebutton',['username' => $user->username,'action'=>'love']) }}" > 
  <button  class="btn btn-md  btn-default  btn-lg-round waves-effect waves-teal" type="button" style="z-index: -1; "  id="lovebtn">Love</button>    
  </a>
</div>

- Vish_TS

---

当你给 z-index = -1 时，你的按钮必须隐藏或者在另一个元素下面，对吗？ - Nitesh

是的，但在关闭隐藏按钮的元素后，该按钮只显示一个简单的光标，我的意思是它无法点击。 - Vish_TS

提供更多的代码非常有用。 - Jishnu V S

如果我给我的按钮设置了z-index，它会从我的导航栏中弹出来。 - Vish_TS

我的代码有2000行+我无法制作JS Fiddle，如果您有任何建议，我可以获取这些图像。 :) - Vish_TS

Answer 1

对于那些未指定z-index值的元素，它们的z-index值为auto。只要您不发布更多代码，我们就无法提供帮助。

我在这里尝试了您提供的代码：https://jsfiddle.net/cb16h3jo/，按钮是响应的。

您可以在浏览器中检查您的按钮，看看是否有其他元素覆盖在您的元素上。如果是这样，请将该元素的z-index更改为低于您的按钮z-indez，如下所示：z-index: -2

- akdsfjakls

Answer 2

我猜你将z-index设为-1是有原因的吧？这并不是因为你的按钮无法点击，而很可能是有其他东西重叠在它上面（我已经尝试了你发布的代码片段，并且可以点击按钮）。

- Kevin Chacón

Answer 3

你可以使用较高的值将按钮置于顶层...尝试一下。

z-index=3 

或者 z-index=5 或者 z-index=9

- Luciano Gonçalves