当我使用时，为什么不进行链接工作：在/之后/：后面的URL？

Question

我想为我的css按钮添加一些背景结构。这就是按钮代码的样子：

.button a {
color: white;
padding: 2% 6%;
width: 100%;
margin-top: 3%;
display: inline-block;
text-decoration:none;
background-color: #49c0f0; background-image: -webkit-gradient(linear, left top, left bottom, from(#49c0f0), to(#2CAFE3));
position:relative;}

现在我用户：之后向按钮添加几乎透明的背景图像：

.button a:after {
content:'';
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:url(../images/structure.png);
opacity:0.05;}

它看起来很不错但不幸的是，这些按钮之前和之后的所有链接都不再可点击了。我想知道它是否与周围物品的绝对/相对位置有关......

Answer 1

这是因为.button a:after绝对定位，因此默认显示在.button a前面。

为避免这种情况，您可以使用z-index：

.button a:after {
    z-index: -1;
}