有CSS，包括position: absolute;包含到容器节点

Question

如何将 CSS，包括 position: absolute; 包含到容器节点中？即带有 position: absolute 的元素应该位于容器节点的左上角，而不是整个文档的左上角。相当于 iframe

使用阴影 DOM 隔离 styleNode 中的 CSS 的示例代码，这是我无法控制的：

test.html

<html>
<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>

想要的结果： 'Hello World' 显示在 'this should still be visible' 下面，而不是在它上面。

Answer 1

绝对定位是相对于第一个向上的祖先发生的，它本身有一个位置集。

如果找不到这样的显式定位，则默认使用 body 元素。

如果您给父元素定位，则相对定位将与其相关。

<html>
<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>

有CSS，包括position: absolute;包含到容器节点

have CSS, including position: absolute; contained to a container node

css

shadow-dom