如何用CSS将底部容器上移覆盖顶部容器以缩小SVG高度

我希望通过向上推动底部的灰色内容容器，缩小顶部图片容器的尺寸，从而降低SVG的高度，达到目标效果（附前后对比截图）。

当前使用的HTML结构如下：

<div class="card">
    <div class="card__media">
        <img src="/widget.svg" alt="err"></div>
    <div class="card__content-container">
        <div class="card__header-body-container">
            <div class="card__header">
                <div class="card__header-container">
                    <div class="card__title-container">
                        <h6 class="card__title">Title</h6>
                    </div>
                </div>
            </div>
            <div class="card__body">
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                    industry's standard dummy text ever since the 1500s.
                </p>
            </div>
        </div>
    </div>
</div>

我尝试调整margin、padding和z-index，但都没有成功。

要实现这个效果，核心是让底部内容容器向上覆盖顶部图片容器，同时限制图片容器的高度，具体CSS调整如下：

• 设置卡片容器为相对定位：给.card添加position: relative，让内部元素的定位基准统一。
• 调整内容容器的位置与层级：给.card__content-container设置负上边距（比如margin-top: -80px，数值按需调整），同时添加position: relative和z-index: 1，确保它能覆盖在图片容器上方。
• 限制图片容器高度并裁剪内容：给.card__media添加overflow: hidden，裁剪掉被内容容器覆盖的图片部分；也可以直接设置固定高度，比如height: 120px，明确顶部容器的最终高度。

示例CSS代码：

.card {
  position: relative;
  width: 300px; /* 示例宽度，可根据实际需求调整 */
}

.card__media {
  height: 120px; /* 顶部容器的目标高度 */
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，自动裁剪超出部分 */
}

.card__content-container {
  margin-top: -80px; /* 向上移动的距离，需和顶部容器高度配合 */
  position: relative;
  z-index: 1;
  background-color: #f0f0f0; /* 灰色背景，示例颜色 */
  padding: 20px;
  border-radius: 8px;
}

原理说明：
负margin让内容容器向上偏移，覆盖顶部图片容器的下半部分；z-index:1确保内容容器在视觉层级上高于图片；图片容器的固定高度+overflow:hidden会自动裁剪掉被覆盖的图片区域，最终实现整体降低SVG高度的效果。如果需要更灵活的适配，可以用CSS变量配合calc()计算偏移值，比如margin-top: calc(-1 * var(--overlap-height))。

内容的提问来源于stack exchange，提问作者Keith M