Question

我在这个网站上有一个按钮： 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代码，则该链接有效！但我当然希望定位我的按钮。

可能是什么问题？

Answer 1

试试这个：

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

这会使你的链接和悬停效果有效。

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

Answer 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;
}

定位按钮时链接不起作用

2 个答案: