时间戳

首页 > 解决方案 > 绝对定位元素在使用过滤器的活动时丢失位置

html - 绝对定位元素在使用过滤器的活动时丢失位置

问题描述

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

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

标签： htmlcss

解决方案

我也不明白它的确切原因。但是，您要做的是将过滤器应用于 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>

这解决了它。

推荐阅读