backdrop-filter 祖先元素悄悄劫持了 fixed 弹层的定位原点

做 glassmorphism 风格界面的时候，侧边栏、卡片、工具栏几乎每个面板都有 backdrop-filter: blur()——磨砂玻璃质感嘛，好看。但有一天我在侧边栏组件里触发一个全屏确认弹框，发现弹层根本没有覆盖整个视口，而是缩在侧边栏的左下角，背景遮罩也只盖住了那一小块面板区域。

明明写的是 position: fixed; inset: 0，按道理应该铺满全屏。

现象

弹层 CSS：

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  place-items: center;
  background: rgba(0, 0, 0, 0.5);
}

预期：覆盖整个浏览器视口，内部对话框居中。

实际：弹层被限制在触发它的面板（比如宽 290px 的侧边栏）内部，背景遮罩只盖住了那个小区域，对话框也挤在角落。

把同样的弹层组件挪到 App 根节点渲染，立刻恢复正常——这是关键线索。

根因

CSS 规范中，position: fixed 的元素通常以**视口（viewport）**作为 containing block 来计算位置和尺寸。但有一个鲜为人知的例外：如果某个祖先元素设置了以下属性，它就会成为 fixed 子元素的 containing block，此时 fixed 退化为相对该祖先定位，行为等同于 absolute：

transform（含 transform: none 以外的任何值）
perspective
filter（含 filter: none 以外的任何值）
backdrop-filter
will-change: transform | filter | perspective
contain: paint | layout | strict

glassmorphism 设计里，磨砂玻璃面板普遍写 backdrop-filter: blur(10px)，这一行就悄悄让该面板成为内部所有 position: fixed 子孙的 containing block。inset: 0 展开后变成了相对面板四边为 0，而不是相对视口。

坑：backdrop-filter 让 fixed 定位锚定到了祖先面板，而不是视口

任何带有 backdrop-filter、filter、transform、will-change: transform 的祖先元素，都会成为 position: fixed 后代的 containing block。弹层写 inset: 0 只会铺满该祖先，不是整个屏幕。

glassmorphism 界面尤其容易踩——每个磨砂面板都在触发这个规则。

正解

把弹层通过 React createPortal 渲染到 document.body，让它逃出所有带 backdrop-filter 的祖先：

import { createPortal } from 'react-dom'
 
export function Modal({ onClose, children }) {
  return createPortal(
    <div
      className="fixed inset-0 flex place-items-center bg-black/50"
      onMouseDown={onClose}
    >
      <div
        className="modal-box"
        onMouseDown={(e) => e.stopPropagation()}
      >
        {children}
      </div>
    </div>,
    document.body,
  )
}

Portal 让 .modal 节点成为 <body> 的直接子元素，脱离了所有玻璃面板的 containing block 链，position: fixed; inset: 0 重新回归视口定位。

不用 React 的方案：

原生 JS：把弹层 DOM 节点移动为 <body> 的直接子元素
使用浏览器原生 <dialog> 元素（dialog.showModal()）或 CSS popover API——它们渲染在 top layer，天然免疫 containing block 的影响

不要尝试的错误方向：

删掉面板的 backdrop-filter：玻璃质感消失，得不偿失
用 position: absolute + 手动计算偏移：脆弱且无法适应布局变化

正解：createPortal 到 document.body 让 fixed 弹层逃出玻璃面板

将弹层组件用 createPortal(node, document.body) 包裹，DOM 节点挂到 <body> 下，绕过所有 backdrop-filter 祖先的 containing block 约束。DevTools 检查：.modal 应是 <body> 的直接子节点。

排查速查

遇到 position: fixed 弹层位置异常时，检查链路：

把弹层临时移到 App 根节点——恢复正常 → 说明是 containing block 问题
DevTools 逐层检查弹层的祖先：找 backdrop-filter、filter、transform、will-change
找到元凶 → 用 createPortal 解决，不要修改面板的视觉样式

同族坑：body { display: grid; place-items: center } 也会让 Portal 挂到 body 的 fixed 子元素发生位移——根因不同但症状相似，两个一起检查。

一句话外卖

backdrop-filter 不只是视觉属性——它会重定义后代 position: fixed 的坐标原点，glassmorphism UI 里每个磨砂面板都是潜在的"定位陷阱"，弹层必须 Portal 出去。