有人能告诉我为什么当我的链接下面有一个 div 时我的链接不可点击吗？

Question

我正在为我的网站制作一个小部件，显示作者及其社交链接。 它工作正常，直到我在混合中添加了模糊的背景 div。 关于它的一些东西不再让我点击链接。 我试过添加 z-index 值，但这似乎没有帮助。 查看我的小提琴以了解我的问题。 下面是有问题的类...

.social_artist_image_wrapper {
    position:absolute;
    height:126px;
    width:580px;
    background-size:cover;
    opacity:0.3;

    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);  
}

Answer 1

因为具有position:absolute （或除static之外的任何元素）的元素被放置在position:static元素的顶部，除非它们具有负z-index 。

尝试放置position:relative对于您的内部区域，加上半透明的背景颜色：演示

Answer 2

我认为这是因为你的 div 不在它下面，它在它的上面。 这是因为您使用的是position: absolute 。 您可能可以通过position:relative实现您正在寻找的东西。

Answer 3

更改您的 CSS 以具有以下内容：

.social_artist_text_wrapper a {
    color:#bbb;
    text-shadow:0px 0px 5px #000;   
    position: relative;
    z-index: 2;
}

正如其他人所说，这是因为您绝对定位了背景图像。 因此，为了让其他元素在它前面呈现，您需要设置z-index属性，该属性仅在position属性不是static时才有效。

更新了小提琴。

Answer 4

将此样式添加到“.social_artist_image_wrapper”类

pointer-events:none;

缺少 IE 支持，因此上面的定位答案可能更适合您的需求（除非您不需要支持 IE8 或 IE9）