absolute定位与backdrop-filter冲突问题排查及解决方案求助

原因解释 #

当元素应用backdrop-filter属性时，即使它的position是默认的static，也会自动成为其内部绝对定位元素的包含块，这是CSS规范的定义。

• 未添加backdrop-filter时，.absolute的所有祖先（#root、.left、body）都是position: static，因此它会相对于**初始包含块（视口）**定位——而body设置了height: 100vh并占满视口，所以视觉上看起来是相对于body。
• 添加backdrop-filter后，#root触发了包含块的创建，.absolute会以#root为基准进行定位，因此出现了定位基准变化的现象。

解决方案 #

根据需求，提供两种常用解决思路：

思路1：保持.absolute相对于视口/body定位 #

方案A：给body添加相对定位

给body设置position: relative，让它成为.absolute的包含块，不受#root的backdrop-filter影响：

body {
  border: 3px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative; /* 添加这一行 */
}

方案B：将.absolute改为固定定位

固定定位始终相对于视口，不受任何包含块影响：

.absolute {
  position: fixed; /* 替换原来的absolute */
  border: 3px solid green;
  width: 50px;
  height: 50px;
  top: 0;
  left: 0;
}

思路2：保留#root作为包含块但优化代码逻辑 #

如果需要.absolute相对于#root定位，可给#root显式设置position: relative，这不会改变现有定位行为，但能让代码逻辑更清晰：

#root {
  border: 3px solid blue;
  height: 80vh;
  width: 80vw;
  background-color: #46443e96;
  backdrop-filter: blur(19px) saturate(180%);
  position: relative; /* 显式声明定位逻辑 */
}

内容的提问来源于stack exchange，提问作者Libra