如何让绝对定位元素溢出overflow:hidden的卡片且保持卡片可收缩？

我正在开发一个布局：使用屏幕高度的垂直flex容器，里面有数量动态的卡片。每张卡片要占满容器宽度，当垂直父容器Y轴溢出时，卡片内的图片自动收缩。为此我给容器和卡片都加了overflow: hidden属性。

但现在的问题是，每张卡片里的绝对定位.message元素需要部分显示在卡片外部，却因为卡片的overflow: hidden被隐藏了，找不到合适的解决办法。

原代码如下：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  height: 100dvh;
  overflow-y: hidden;

  resize: vertical; /* 示例用 */
}

.sidebar {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;

  height: 100%;
  width: fit-content;
  max-width: 9rem;
  padding: 0.5rem;

  border: 1px solid black;

  overflow-y: hidden;
  z-index: 0;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  z-index: 0;
  border: 1px solid black;
  padding: 0.25rem;
}

.card .image-container {
  display: flex;
  flex-shrink: 1;
  width: 100%;
  overflow: hidden;
}

.card .image-container img {
  width: 100%;
  object-fit: contain;
}

.card p {
  flex: 0 0 auto;
}

.card .message {
  position: absolute;
  bottom: 25%;
  left: 90%;
  padding: 0.25rem 0.5rem;
  border-radius: 20%;
  background-color: red;
  z-index: 50;
}

<div class="container">
  <aside class="sidebar">
    <div class="card">
      <!-- image container is required for actual use-case -->
      <div class="image-container">
        <img src="https://picsum.photos/200" alt="200x200 image" />
      </div>
      <p>Some Text</p>

      <div class="message">Hello</div>
    </div>
  </aside>
</div>

核心思路是分离「控制图片溢出」和「承载提示元素」的容器，不让卡片本身同时承担这两个冲突的功能。以下是两种可行方案：

方案一：将提示元素移至卡片同级，外层容器做定位父级 #

把.message从.card中移出，放到和卡片同级的位置，用一个外层容器作为提示元素的定位父级，这样提示元素就不会被卡片的overflow:hidden裁剪。

修改后的代码：

<div class="container">
  <aside class="sidebar">
    <div class="card-wrapper">
      <div class="card">
        <div class="image-container">
          <img src="https://picsum.photos/200" alt="200x200 image" />
        </div>
        <p>Some Text</p>
      </div>
      <div class="message">Hello</div>
    </div>
  </aside>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  height: 100dvh;
  overflow-y: hidden;
  resize: vertical;
}

.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
  height: 100%;
  width: fit-content;
  max-width: 9rem;
  padding: 0.5rem;
  border: 1px solid black;
  overflow-y: hidden;
  z-index: 0;
}

/* 新增外层容器，作为提示元素的定位父级 */
.card-wrapper {
  position: relative;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 仅负责裁剪内部图片 */
  width: 100%;
  z-index: 0;
  border: 1px solid black;
  padding: 0.25rem;
}

.card .image-container {
  display: flex;
  flex-shrink: 1;
  width: 100%;
  overflow: hidden;
}

.card .image-container img {
  width: 100%;
  object-fit: contain;
}

.card p {
  flex: 0 0 auto;
}

.message {
  position: absolute;
  bottom: 25%;
  left: calc(100% - 10%); /* 对应原left:90%的视觉效果 */
  padding: 0.25rem 0.5rem;
  border-radius: 20%;
  background-color: red;
  z-index: 50;
}

方案二：卡片保留overflow:hidden，提示元素作为外层容器的子元素 #

给卡片套一个外层容器，外层容器不设置overflow:hidden，只作为提示元素的承载父级；卡片内部保留overflow:hidden控制图片收缩，这样提示元素不会被裁剪。

核心修改代码：

<div class="container">
  <aside class="sidebar">
    <div class="card-outer">
      <div class="card">
        <div class="image-container">
          <img src="https://picsum.photos/200" alt="200x200 image" />
        </div>
        <p>Some Text</p>
      </div>
      <div class="message">Hello</div>
    </div>
  </aside>
</div>

/* 新增外层容器 */
.card-outer {
  position: relative;
  width: 100%;
}

.card {
  /* 保留原有overflow:hidden，仅裁剪内部图片 */
  overflow: hidden;
  /* 其他样式不变 */
}

.message {
  position: absolute;
  bottom: 25%;
  left: 90%;
  /* 其他样式不变 */
}

原理说明 #

原来的.card同时承担了「控制图片溢出」和「提示元素定位父级」的角色，导致提示元素被overflow:hidden裁剪。通过将定位父级转移到卡片的外层容器，或者把提示元素移到卡片同级，就能让提示元素脱离卡片的裁剪范围，同时保留卡片对内部图片的溢出控制逻辑。

内容的提问来源于stack exchange，提问作者Aryav Bhola