HTML CSS无法点击链接

-11

有相当多的问题提出几乎相同的问题。现在我遇到了同样的问题，我发现很少有解释如何找出根本原因的答案。这似乎是其他div叠加在链接上的原因，但我怎么能找出哪一个div是责备。我已将链接的z-index设置为大数字，但不起作用。我不知道为什么。任何人都可以帮助我如何调试这个问题？HTML CSS无法点击链接

我的更困难的情况是，该网站是一个WordPress的。有很多嵌套的div s。我可以使用浏览器的检测工具快速找出如何解决这些问题吗？

link - 在此网站上，左侧边栏的链接不可点击。

来源

2017-05-08 stcheng

请阅读[我的网站上的东西不起作用。我可以只粘贴一个链接吗？]（http://meta.stackoverflow.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link -to-IT）。当外部资源消失或者固定时，依赖于外部资源被理解的问题变得毫无用处。创建一个[MCVE]并将其置于**问题本身**中。 – Quentin

问题在于这个类#theme-page:before它有position: absolute;它覆盖了所有的页面元素，当你删除它时，一切都会正常工作。

来源

2017-05-08 09:04:35

谢谢！你如何找到它？任何程序？ – stcheng

你可以使用Chrome来检查元素和调试，顺便说一句，这是最重要的调试工具。 –

此链接将帮助您了解我的意思[Google DevTool]（https://developer.chrome.com/devtools） –

你可以试试这个：包括它在你的css风格最底部：

#theme-page:before { 
    content: " "; 
    position: relative; /*update*/ 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    opacity: 0.1; 
}

请在下面发表评论，如果您有问题，此:)

来源

2017-05-08 09:06:28

为什么它以这种方式工作？ – stcheng

亲爱的问候，我想告诉你'position：block'是无效的属性值！但是当你输入无效值时，默认情况下浏览器会把初始值放在这里，这意味着它将被放在'position：relative;' –

@stcheng因为它覆盖了position属性的所有元素。 –

这是很明显，检查元素时，您遇到position: absolute;问题。看图像，并删除它，它应该是工作 Click to see screen capture

来源

2017-05-08 09:08:19 shojibur

您需要更改的#theme-page::before堆叠顺序，您可以简单地用z-index物业解决这个

#theme-page::before { 
    bottom: 0; 
    content: " "; 
    left: 0; 
    opacity: 0.1; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: -1; /* newly added */ 
} 

#theme-page { 
    position: relative; 
    z-index: 1; /* newly added */ 
}

来源

2017-05-08 09:08:36

HTML CSS无法点击链接

回答

相关问题