如何将Shadow DOM中的element A置于sticky父元素与fixed子元素之间？

问题核心原因 #

你的父div设置了position: sticky和z-index: 10，这会创建一个独立的堆叠上下文。子div的position: fixed和z-index: 50属于这个父堆叠上下文的内部层级，而Shadow DOM中的element A处于主文档的根堆叠上下文里。这就导致element A只能要么整个在父div的堆叠上下文之上（z-index > 10），要么在之下（z-index < 10），没法直接插到父div和它的子div之间。

可行解决方法 #

方法1：移除父div的z-index，打破独立堆叠上下文

如果父div的z-index不是必须保留的，可以直接去掉z-index: 10。此时父div不会创建独立堆叠上下文，子div的fixed定位会相对于视口，属于根堆叠上下文。给element A设置z-index: 10，就能让它处于父div（默认层级，相当于z=0）和子div（z=50）之间。

调整后的父div代码：

<div style="width: 500px; height: 520px; position: sticky;">
    <div style="position: fixed; width: 100px; height: 100px; z-index: 50;"></div>
</div>

element A的样式：

element-a {
    position: absolute; /* 必须是非static定位才能生效z-index */
    z-index: 10;
    /* 补充你的布局样式，比如宽高、位置等 */
}

方法2：将Shadow DOM挂载到父div内部

如果必须保留父div的z-index: 10，可以把包含element A的Shadow DOM直接挂载到父div内部，让element A成为父堆叠上下文的一部分。此时只需给element A设置一个比子div小的z-index（比如1），就能让它处于父div内容之上、子div之下。

示例代码：

<div id="sticky-parent" style="width: 500px; height: 520px; position: sticky; z-index: 10;">
    <div style="position: fixed; width: 100px; height: 100px; z-index: 50;"></div>
</div>

<script>
    const parent = document.getElementById('sticky-parent');
    // 给父div挂载Shadow DOM
    const shadowRoot = parent.attachShadow({mode: 'open'});
    // 创建并配置element A
    const elementA = document.createElement('element-a');
    elementA.style.cssText = `
        position: absolute;
        z-index: 1;
        width: 200px;
        height: 200px;
        background: rgba(255, 0, 0, 0.5);
        /* 你的其他样式 */
    `;
    shadowRoot.appendChild(elementA);
</script>

原理总结 #

• 堆叠上下文是层级渲染的边界，元素一旦属于某个堆叠上下文，其z-index只会在该上下文内部生效。
• 外部元素无法穿透父堆叠上下文，插入到其内部子元素之间，要么打破父堆叠上下文，要么将外部元素纳入父堆叠上下文。

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