如何让包含position:absolute的CSS限定在指定容器节点内

核心原理 #

position: absolute 元素的定位原点默认参考最近的 position 属性不为 static（浏览器默认值）的祖先节点。当Shadow DOM的宿主节点#container为默认static定位时，内部的绝对定位元素找不到符合要求的祖先节点，就会向上追溯到整个文档根节点作为定位上下文，因此会覆盖上层的文本内容。

具体修改方案 #

无需改动无法控制的styleNode内部样式，仅需对Shadow DOM的宿主节点#container做如下配置即可：

• 给#container添加position: relative属性，使其成为内部所有绝对定位元素的定位上下文
• 给#container设置匹配内部内容的最小宽高，避免内部绝对元素脱离文档流导致宿主高度为0，出现位置偏移
• （可选）如果需要完全实现类似iframe的强隔离效果，禁止内部元素溢出宿主范围，可以额外添加overflow: hidden和contain: layout paint size属性，彻底隔离内外样式影响。

修改后的完整代码 #

<html>
<head>
<style>
#container {
  position: relative;
  min-height: 48px; /* 匹配内部32px字体的高度需求 */
  contain: layout paint size; /* 可选，实现类iframe的强样式隔离 */
}
</style>
</head>
<body>
<div>this should still be visible and not affected by container styling</div>

<div id="container"></div>

<script>
    let container = document.querySelector('#container')
    const shadow = container.attachShadow({mode: 'open'}); 
    const styleNode = document.createElement('style');
    styleNode.textContent = `
    div {
        background: blue;
        font-size: 32px;
        position: absolute;
        top: 0;
        left: 0;
    }
    `;

    shadow.appendChild(styleNode);
    const contentNode = document.createElement('div');
    contentNode.textContent = `Hello World`;
    shadow.appendChild(contentNode);
</script>
</body>
</html>

修改后内部的div会以#container的左上角为定位原点，而#container本身处于正常文档流中，位于上层文本的下方，因此Hello World会正常显示在上层文本下方，不会出现覆盖问题。

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