ksp*_*par 5 css css-contain container-queries
我有一个父元素 ( #container) 和container-type: inline-size. 在这个元素内，我有一个带有 的子元素 ( #absolute) position: absolute。这会导致绝对元素相对于 定位#container。但是，我想将其相对于视口定位。
据我所知，这是由container-type: inline-size父元素作为绝对元素的包含块的规则引起的。
container-type: inline-sizeon#container是使用与容器维度相关的容器查询所必需的。在我的例子中，绝对元素呈现在内部#container并且不能轻易移出。
现实生活中的用例是主应用程序#container和全屏模式，它们在负责的组件（位于主容器内）内呈现。
#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>子元素（橙色）相对于父元素（黄色）定位。但我希望它相对于视口，这将使其出现在绿色元素的内部/顶部。
参考：