绝对定位元素在使用过滤器的活动时失去位置[重复]

Question

我遇到了以下我在以下示例中重新创建的奇怪情况：

.relative {
    position: relative;
}
.absolute {
    position: absolute;
    left: 50%;
    top: 100%;
}
a:active {
    filter: brightness(130%);
}

<div class="relative">
    <a href="//google.com"><img class="absolute" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Sternbergia_lutea_showing_the_different_parts_of_the_flower.JPG/130px-Sternbergia_lutea_showing_the_different_parts_of_the_flower.JPG" /></a>
</div>

点击 mousedown 事件会触发具有 filter 属性的 :active 伪类，而图像会丢失其绝对位置，因此链接甚至不会被跟踪。我在任何地方都找不到任何关于它的信息，有人知道为什么会这样吗？

Answer 1

我也不明白它的确切原因。但是，您要做的是将过滤器应用于 img 而不是标签。也许标签上的行为是未定义的：

.relative {
    position: relative;
}
.absolute {
    position: absolute;
    left: 50%;
    top: 100%;
}
a:active img {
    filter: brightness(130%);
}

<div class="relative">
    <a href="//google.com"><img class="absolute" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Sternbergia_lutea_showing_the_different_parts_of_the_flower.JPG/130px-Sternbergia_lutea_showing_the_different_parts_of_the_flower.JPG" /></a>
</div>

这样就解决了。