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

Posted

技术标签:

【中文标题】声明 z-index 后无法点击按钮?【英文标题】:Can't click on button after declaring z-index? 【发布时间】:2017-05-09 20:13:55 【问题描述】:

在给它 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>

【问题讨论】:

当您给 z-index = -1 时,您的按钮必须隐藏或位于另一个元素下方,对吧? 你能给我一把小提琴吗 我认为你必须给出正的 z-index 或者如果导航栏有 z-index 那么你应该给出更多的值 是的,但在关闭隐藏按钮的元素之后。该按钮只显示一个简单的光标。我的意思是它不可点击 我们可以理解问题,但不理解情况 【参考方案1】:

因为对于那些没有分配z-index 值的元素,它的z-index 值是自动的。只要您不发布更多代码,我们就无法提供帮助。

我尝试了您在此处提供的代码:https://jsfiddle.net/cb16h3jo/,并且该按钮具有响应性。

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

【讨论】:

【参考方案2】:

我猜你有理由将 zindex 设置为 -1?不是你的按钮不可点击,是不是有什么东西重叠了它(我试过你发布的那段代码,我可以点击按钮)。

【讨论】:

【参考方案3】:

您可以使用较高的值将按钮带到顶层...尝试

z-index=3 

或 z-index=5 要么 z-index=9

【讨论】:

以上是关于声明 z-index 后无法点击按钮?的主要内容,如果未能解决你的问题,请参考以下文章

我网站周围边框图像的 z-index 高于按钮,但我希​​望按钮的链接仍然可以点击,尽管 z-index 较低

bootstrap模态框背景灰色,按钮全部无法点击,求解决办法

21-z-index

21-z-index

z-index详解

固定定位破坏 z-index