css filter 滤镜 影响 元素位置 位置产生了变化，求解

#importSaveData {
  position: absolute;
}


// 鼠标移入，亮度是降低了， 但是位置产生了变化，怎么破解
#importSaveData:hover {
  filter: brightness(90%);
}

正常filer不会影响布局的，你是不设置了绝对定位没注意到，麻烦贴一下全部代码

img

检查下代码，filter滤镜不会影响，审查一下元素，如下图操作，选中你的元素，检查触发你的hover，看看有些什么样式

img

代码有点少，推导不出具体的原因，不过我复现了一种filter影响布局的情况，深层的原因应该是一样的，对你可能会有帮助
1.代码

<!DOCTYPE html>
<html lang="en">
<body>
    <div class="box">
        <div class="cell"></div>
    </div> 
</body>
</html>
<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-left: 10px;
    }
    .cell{
        width: 50px;
        height: 50px;
        position: absolute;
        background-color: blue;
        left: 10px;
    }
    .box:hover{
        filter: brightness(80%);
    }
</style>

2.现象
原本的布局：

img


触发.box hover时布局发生变化

img

3.原因
当filter有值的时候，如果该元素或者子元素设置了absolute定位，那么创建一个新的容器（不可见）将其包含，因此会导致absolute用以定位的元素发生变化变成了创建的这个容器。

4.解决
为父元素即实例代码的.box添加relative定位，即可避免filter导致的定位变化问题。

基于问题，给与建议

  1. 有position的absolute得时候，相应的应该有对应的relative做呼应，既然绝对定位了，你的top，left， right，bottom相对应的应该有所表现，这几个属性是对定位的盒子的初始化坐标的设置
  2. 单纯的样式的修改不会造成页面的回流，css filter hover的时候，如果没有设置1条件下的初始化坐标，hover的时候，会有一个跟随鼠标的漂移动作，就是一些浏览器下面的默认像素，导致错位

备注：只要设置了当前目标块的其实坐标属性值，不会出现移动的问题，记得注意在多个absolute条件下 zIndex的问题

祝好