如何仅通过CSS让absolute元素相对于非父级指定元素定位

假设我有如下简单的绝对定位元素：

.container {
    position: relative;
    width: 250px;
    height: 250px;
}
.abs {
    position: absolute;
    width: 100%;
    height: 100%;
}

<div class="container">
    <div class="abs"></div>
</div>

是否存在仅使用CSS即可实现、无需修改原有布局的方案，能让class为abs的元素相对于body或.container之外的其他元素定位？
该问题的实际场景为：需要向第三方UI库中动态注入元素，且无权修改该库的原有布局。

约束条件 #

• 当前场景下无法使用teleport能力移动DOM。
• 无法修改.container容器的样式，该容器属于第三方库，不允许调整。

存在完全符合约束的可行方案，不需要修改原有布局、不需要移动DOM节点：

相对于视口/body定位方案 #

直接给.abs元素设置position: fixed即可，参考代码：

.abs {
    position: fixed;
    /* 按需设置top/left/right/bottom偏移量即可 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

实现原理：position: absolute会向上查找最近的非static定位祖先作为定位基准，而position: fixed默认以浏览器视口作为定位基准，只要父级.container没有设置transform、perspective、filter、will-change: transform这类会创建新固定定位上下文的属性，就会完全跳出父级relative容器的定位约束。从给出的第三方容器默认样式来看，不存在这类触发属性，该方案可直接生效，兼容所有主流浏览器。

相对于任意外部元素定位方案 #

如果需要将.abs绑定到.container外的任意指定元素作为定位基准，使用原生CSS锚点定位即可实现，步骤如下：

1. 保持.abs的position: fixed设置不变
2. 给作为定位目标的外部元素设置锚点名：

   .your-target-element {
       anchor-name: --abs-target;
   }
   

   该属性不会影响目标元素的原有样式和布局，不管目标元素是自行注入的还是第三方库的，只要能通过CSS选择器选中就可以添加，不需要改动第三方库的原有代码逻辑。
3. 给.abs绑定对应锚点，设置偏移规则即可：

   .abs {
       position: fixed;
       position-anchor: --abs-target;
       /* 按需设置偏移，示例为让abs完全覆盖目标元素 */
       inset: auto;
       top: anchor(top);
       left: anchor(left);
       width: anchor-size(width);
       height: anchor-size(height);
   }
   

该方案目前已兼容Chrome/Edge 125+、Firefox 132+、Safari 18+版本，适合不需要兼容过旧浏览器的场景。

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