HTML/CSS中：如何让绝对/固定元素相对视口而非含container-type:inline-size的父元素定位？

有一个设置了container-type: inline-size的父元素#container，内部包含position: absolute的子元素#absolute。当前该绝对元素相对#container定位，但需要它相对视口定位。#container的container-type: inline-size是容器查询必需的，且绝对元素无法移出容器（实际场景是主容器内的全屏模态框，嵌套在组件内部）。

当前代码示例：

#foo {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

#container {
  container-type: inline-size;
  width: 200px;
  height: 100px;
  background-color: yellow;
}

#absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 50px;
  background-color: orange;
}

<html>
<body>
  <div id="foo">foo</div>
  <div id="container">
    <div id="absolute">Absolute</div>
  </div>
</body>
</html>

当前橙色元素相对黄色容器定位，需求是让它相对视口定位，显示在绿色元素内部/上方。

解决方案 #

根据CSS包含块规则，设置container-type: inline-size的元素会成为内部绝对定位元素的包含块。要让绝对元素相对视口定位，最简单的方法是使用position: fixed替代position: absolute——fixed定位的元素默认以视口为包含块，不受父容器的container-type影响。

修改后的CSS代码：

#foo {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

#container {
  container-type: inline-size;
  width: 200px;
  height: 100px;
  background-color: yellow;
}

#absolute {
  position: fixed; /* 替换为fixed定位 */
  top: 0;
  left: 0;
  width: 80px;
  height: 50px;
  background-color: orange;
}

如果必须保留position: absolute，可以通过在#container外添加一个设置了position: relative的顶层容器（如<body>），确保#absolute的包含块指向该顶层容器，但这种方法需要额外调整布局，不如fixed直接高效。

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