定位按钮时链接不起作用答案

【问题标题】：Link doesn't work when positioning button定位按钮时链接不起作用
【发布时间】：2015-08-23 20:25:10
【问题描述】：

我在这个网站上有一个按钮： http://site9171756.91.webydo.com/?v=1

HTML：

<a href="#" class="Button" style="position: absolute; left: 1000px; 
top: 100px;">dark grey</a>

CSS：

.Button {
  font-family: Arial;
  color: #8bb857;
  font-size: 20px;
  background: #ffffff;
  padding: 10px 20px 10px 20px;
  border: solid #8bb857 2px;
  text-decoration: none;
} 

.Button:hover {
 background: #c8f098;
 text-decoration: none;
}

如果我从 html 中删除 position 代码，则链接有效！但我当然想定位我的按钮。

可能是什么问题？

【问题讨论】：

你试过用浏览器工具调试它吗？整个网站上到处都是巨大的透明框。
不.. 不确定您的意思？ a 具有透明背景的图像。你是这个意思吗？
不，this 是我的意思。整个网站上都有这些盒子。它们似乎毫无用处。您可以删除它们吗？因为这也可以解决您的问题，而且会更优雅。
hmm.. 我在网站上使用 webydo，所以我无法编辑大部分代码。它是一个页面构建器系统。但无论如何 - 这不是一个大问题。你无论如何都看不到它们：S

标签： html css position css-position

【解决方案1】：

试试这个：

<a class="Button" style="position: absolute; left: 1000px; top: 100px; z-index: 1000;" href="#">dark grey</a>

这将使您的链接和悬停效果正常工作。

我在元素样式中添加了 z-index: 1000;。

【讨论】：

【解决方案2】：

将此 CSS 添加到您的样式表中。

.Button {
    font-family: Arial;
    color: #8bb857;
    font-size: 20px;
    background: #ffffff;
    padding: 10px 20px 10px 20px;
    border: solid #8bb857 2px;
    text-decoration: none;
    z-index: 10;
}

【讨论】：