组件内子元素 fixed 定位无效了，是什么原因？

发布日期： 2024-10-22 阅读量： 作者： 网络

组件内子元素使用 fixed 失效原因

在组件中添加

子元素并为它们设置 fixed 定位属性时，可能会发现这些子元素无法正确定位。造成此问题的原因在于：

backdrop-filter 属性影响

组件外层可能使用了 backdrop-filter 属性，该属性可以模糊背景。当 backdrop-filter 生效时，会导致组件内的子元素的 fixed 定位失效，因为这些子元素实际上是相对模糊的背景层定位的。

解决方法

要解决此问题，可以将 backdrop-filter 属性应用于组件的特定区域，而不是整个组件。例如，可以将 backdrop-filter 应用于

，然后将

子元素置于

内。

代码示例

<div style="backdrop-filter: blur(4px);">
  <p style="position: fixed; top: 100px; left: -50%;">...</p>
  <p style="position: fixed; top: 200px; left: -25%;">...</p>
</div>

# 固定定位

上一篇: Go 框架中应对安全漏洞的最佳实践

下一篇: win7系统输入法切换不出来怎么办

组件内子元素 fixed 定位无效了，是什么原因？

随便看看