也许这可以给你一个起点。我没有“直接”回答这个问题，但更多的是做了我认为你在追求的事情。
我将容器 Package 在一个div中，并给它一个浅绿色的边框，只是为了在窗口中“超级居中”。我还在主体中添加了一个100vh，并将我的新容器超级居中-所以不需要神奇的大边距，只需要让if在窗口的中心流动。
我为你的元素创建了一些网格，并使用你的大小来放置内容;我转换为em，因此基于常见的浏览器默认设置，我将字体大小设置为16 px，因此100px转换为100/16或6.25em，然后我给了卡片一些行/列-创建更多的行和列，因为你认为合适，以便在你想要的地方获得徽章和卡片标签;然后扩展行/列的数量，并将它们放置在其中以捕获您所需的布局。使用这种类型的技术，我发现我很少使用任何“位置”，如绝对等。这些天。

* {
  font-size: 16px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

.base-container {
  display: grid;
  place-items: center;
  border: solid #00ff0040 2px;
  padding: 0.25em;
}

.scroll-container {
  width: 10em;
  height: 12.5em;
  border: solid 1px silver;
  display: flex;
  column-gap: 0.5em;
  overflow-x: scroll;
}

.card-container {
  display: grid;
  grid-template-rows: 1fr;
  column-gap: 1em;
  grid-template-columns: 9.375em;
  grid-template-areas: "card";
}

.b-card {
  grid-area: card;
  display: grid;
  grid-template-rows: 3.125em 1fr;
  grid-template-columns: 3.125em 6.25em;
  grid-template-areas: ". cardlabel" "badge cardlabel";
  border: 1px solid blue;
  display: grid;
  grid-template-rows:
}

.card-badge {
  grid-area: badge;
  border: solid 1px red;
}

.card-label {
  grid-area: cardlabel;
  border: solid 1px #00ffff;
}

个字符

我设法想出了一个解决方案，它看起来不漂亮，但它适合我的需要。显然溢出：scroll对定位一点也不友好，并且不允许可视地显示超出根元素高度的元素（在这个例子中，它是一张卡片），但是如果你尝试使用负值来定位元素，那么一切都会正常，因为该元素没有绝对位置设置，并且具有其自身的高度，滚动容器被强制调整到该高度

<style>
.container {
    display: flex;
    width: 400px;
    border: 1px solid red;
    padding: 5px;
    overflow-x: scroll;
}

.card {
    width: 250px;
    height: 200px;
    border: 1px solid blue;
}

.badge {
    margin: auto;
    border: 1px solid green;
    width: 100px;
    height: 50px;
    margin-bottom: -25px;
}
</style>

个字符

您可以使用z-index属性来控制元素的堆叠顺序。为badge（.c class）设置一个更高的z-index值，以便它显示在溢出的内容之上。此外，请确保父容器（.a class）具有position：relative属性，因为z-index仅对定位的元素有效。

.a {
    width: 150px;
    height: 200px;
    border: solid 1px silver;
    margin: 200px;

    /* important */
    display: flex;
    overflow-x: scroll;
    position: relative; /* Make sure to add this line */
}

.b {
    width: 100px;
    height: 100px;
    border: 1px solid blue;

    /* important */
    position: relative;
}

.c {
    width: 100px;
    height: 100px;
    border: solid 1px red;
    margin-top: -50px;

    /* important */
    position: absolute;
    z-index: 1; /* Add this line to control the stacking order */
}

字符串