列表项内绝对定位徽章被overflow遮挡的问题求助

问题说明 #

需要实现带有向外延伸徽章的横向滚动卡片列表：

• 容器.a为横向滚动的卡片列表容器，设置了overflow-x: scroll
• 卡片.b为相对定位容器，内部包含绝对定位的徽章.c，徽章通过margin-top: -50px向外延伸
• 当前问题：徽章会被容器.a的overflow裁剪遮挡；尝试给.a添加padding-top虽能显示徽章，但破坏原有布局，故需替代方案

原代码 #

CSS #

.a {
    width: 150px;
    height: 200px;
    border: solid 1px silver;
    margin: 200px;
    /* 核心属性 */
    display: flex;
    overflow-x: scroll;
}

.b {
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    /* 核心属性 */
    position: relative;
}

.c {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    margin-top: -50px;
    /* 核心属性 */
    position: absolute;
}

HTML #

<div class="a">
    <div class="b">
        <div class="c"></div>
    </div>
    <div class="b">
        <div class="c"></div>
    </div>
</div>

无效方案示例 #

给容器添加padding-top，虽能显示徽章，但会改变容器内部布局，不可行：

.a {
    width: 150px;
    height: 200px;
    border: solid 1px silver;
    margin: 200px;
    display: flex;
    overflow-x: scroll;
    /* 无效方案：破坏布局 */
    padding-top: 50px;
}

可行解决方案 #

利用clip-path属性精确控制容器的裁剪区域，允许顶部内容溢出，同时保留横向滚动功能，无需修改布局结构：

修改后的.a样式：

.a {
    width: 150px;
    height: 200px;
    border: solid 1px silver;
    margin: 200px;
    display: flex;
    overflow-x: scroll;
    /* 关键：允许顶部向外溢出50px，适配徽章的偏移量 */
    clip-path: inset(-50px 0 0 0);
}

原理说明 #

• clip-path: inset(-50px 0 0 0)表示容器的裁剪区域从顶部向外延伸50px，刚好容纳徽章的偏移部分，不会裁剪溢出的徽章
• 容器的overflow-x: scroll依然生效，保持横向滚动功能
• 无需修改原有DOM结构或添加额外padding，避免布局破坏

内容的提问来源于stack exchange，提问作者Андрей Воробьёв