跨容器元素Z-Index设置：让Logo覆盖Popup弹窗

你遇到的问题核心是z-index的生效规则：

• z-index仅对设置了position: relative/absolute/fixed/sticky的元素生效，默认position: static的元素z-index不生效。
• 如果元素的父级容器创建了堆叠上下文（比如设置了z-index、opacity<1、transform、filter等属性），子元素的z-index只能在这个父级的堆叠上下文内排序，无法突破到外部层级。

对应你的代码，调整方案如下：

1. 给.logo和.popup都加上定位属性，确保z-index生效
2. 检查.page-wrapper或header是否有创建堆叠上下文的属性，如果有移除或调整，避免限制logo的层级

修正后的代码示例：

<body>
    <div class="page-wrapper">
        <header>
            <div class="logo"></div>
        </header>
    </div>
    <div class="popup"></div>
<style>
    .popup {
        position: fixed; /* 或absolute/relative，根据布局需求选择 */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 2;
    }

    .logo {
        position: relative; /* 必须设置定位，z-index才生效 */
        z-index: 3;
        /* 示例样式：给logo添加宽高和背景方便演示 */
        width: 100px;
        height: 50px;
        background: #fff;
    }

    /* 确保父级不创建堆叠上下文，移除不必要的属性 */
    .page-wrapper, header {
        position: static; /* 默认值，不触发堆叠上下文 */
        /* 如果之前有z-index、transform这类属性，此处移除 */
    }
</style>
</body>

额外提醒：

• 如果父级必须保留堆叠上下文（比如需要做动画或特殊布局），可以把logo从当前父级中移出，直接放到<body>标签下，这样它的堆叠上下文和popup同级，就能通过z-index实现覆盖。
• 堆叠上下文的优先级逻辑是：父级堆叠上下文的层级 > 子元素的z-index，所以如果父级的堆叠层级比popup低，子元素z-index再高也无法突破。

内容的提问来源于stack exchange，提问作者H.Husain