div定位异常：.card设overflow:hidden时.active层z-index失效

云上老周

2026-11-2

问题根因

之前调整z-index没有任何效果，本质和层叠顺序没关系：只要.card设置了overflow: hidden，所有属于它后代的内容，只要超出卡片边界，就会被强制裁切——哪怕给弹层设了再高的z-index，被裁切的部分根本不会进入上层渲染流程，自然浮不到卡片外面。

零破坏实现方案

完全保留.card的overflow: hidden配置，不改动原有圆角裁切效果，有两个可落地的实现路径：

方案1：调整DOM层级，把弹层移出.card的子节点范围
操作步骤：
1. .card的所有原有样式（包括overflow: hidden、圆角值）完全不动，不做任何修改
2. 将.active状态的分享弹层从.card的内部DOM结构中挪出，放到和.card同层级的位置——两者共同归属于外层的页面布局包裹容器下
3. 给这个外层包裹容器设置position: relative，作为两者的定位参考上下文
4. 给分享弹层设置绝对定位，对齐到目标展示位置（也就是卡片外侧右下角的位置），再给弹层设置高于.card的z-index值即可
  这个实现是该Frontend Mentor文章预览挑战的通用最优解，没有样式副作用，弹层完全不会被卡片的overflow规则裁切。
方案2：拆分卡片内部的裁切作用域
如果不想改动原有DOM的嵌套关系，可以调整样式的职责边界：
1. 把.card的overflow: hidden和圆角配置转移到内部所有需要被裁切的内容块上（比如封面图容器、正文文本块、作者信息栏），给这些内部块单独设置overflow: hidden和对应圆角值
2. 移除.card本身的overflow: hidden属性，只把它作为弹层的定位容器使用
3. 此时分享弹层是.card的直接子元素，不再处于被设置了overflow: hidden的内部块范围内，超出卡片边界的部分可以正常显示，不会被裁切。