filter 与 fixed 冲突原因及解决方案

2023-10-26 04:53:40

当 <body> 滤镜与 <fixed> 定位碰撞时

在网页的世界里，元素的定位方式决定了它们在页面上的位置。<fixed> 元素一直是相对于视口（浏览器窗口可见区域）进行定位的，确保它们始终固定在屏幕上。然而，当 <body> 元素应用了 filter 滤镜属性时，游戏规则就变了，<fixed> 元素的定位方式将发生意想不到的变化。

滤镜的迷雾

滤镜属性可以用来给网页添加各种视觉效果，从模糊到色彩失真再到阴影。当应用于 <body> 元素时，滤镜会影响整个网页的渲染方式。通常情况下，这不会影响元素的定位，但对于 <fixed> 元素来说却不是这样。

定位冲突

<fixed> 元素的定位依赖于其 position 属性，它决定了元素相对于其父元素或视口的定位方式。在没有使用滤镜属性的情况下，<fixed> 元素相对于视口进行定位，这意味着它们会始终固定在屏幕上。但是，当 <body> 元素应用了滤镜属性时，<fixed> 元素的定位参考点就会从视口切换到 <body> 元素本身。

想象一下 <fixed> 元素就像钉在视口上的图钉。当 <body> 元素应用滤镜时，就像把视口上的一块布移开了，图钉现在相对于布料进行定位，而不是视口。这就导致 <fixed> 元素不再固定在屏幕上，而是相对于网页的其余部分进行定位。

解决冲突的妙招

避免 <body> 元素上使用 filter 滤镜属性是最简单的解决方法。然而，有时我们可能需要滤镜来实现特定的设计效果。在这种情况下，有几种方法可以解决 <fixed> 元素定位冲突：

使用 transform 属性抵消滤镜效果： transform 属性可以用来移动和旋转元素，抵消滤镜的影响。例如，将 transform: translate(-50%, -50%) 应用于 <fixed> 元素会使其相对于视口居中定位。
使用其他定位方式： 除了 fixed 定位之外，还有 absolute 和 sticky 定位方式。这些定位方式不受 <body> 元素滤镜的影响，可以正常地相对于视口进行定位。

代码示例

以下代码示例演示了如何使用 transform 属性来抵消 <body> 滤镜对 <fixed> 元素定位的影响：

<style>
  body {
    filter: blur(5px);
  }

  #fixed-item {
    position: fixed;
    top: 0;
    right: 0;
    transform: translate(-50%, -50%);
  }
</style>