Question

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

.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放在内部区域，再加上半透明的背景颜色：demo

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时才有效。

Updated fiddle

Answer 4

将此样式添加到＆＃34; .social_artist_image_wrapper＆＃34;类

pointer-events:none;

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

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

4 个答案: