使用 position: absolute 配合 position: relative 父容器可精准定位右上角标签，但需注意父容器尺寸约束、盒模型影响及响应式溢出问题；推荐结合 transform 与 inset 属性提升健壮性。

使用 `position: absolute` 配合 `position: relative` 父容器可精准定位右上角标签，但需注意父容器尺寸约束、盒模型影响及响应式溢出问题；推荐结合 `transform` 与 `inset` 属性提升健壮性。

要让“Nouveau”标签始终稳定地显示在卡片右上角（如 Figma 设计稿所示），关键在于建立明确的定位上下文并消除流式布局干扰。原代码中

是普通文档流元素，即使添加 position: absolute，若其父容器 .home-restaurants_card 未设 position: relative，绝对定位将相对于最近的定位祖先（可能为 body），导致跨屏幕偏移。

✅ 正确做法是：

1. 为卡片容器显式声明定位上下文：

   .home-restaurants_card {
     position: relative; /* 必须！使内部绝对定位元素以此为参考 */
     margin: 18px;
     border-radius: 15px;
     overflow: hidden; /* 防止标签在小屏时溢出可见区域 */
   }

2. 对标签应用精确绝对定位：

   .nouveau {
     position: absolute;
     top: 12px;          /* 距顶部安全间距（避免紧贴边缘） */
     right: 12px;        /* 距右侧安全间距 */
     z-index: 2;         /* 确保置于图片和内容之上 */
     /* 保留原有样式 */
     display: flex;
     justify-content: center;
     align-items: center; /* 注意：align-content 对单行 flex 无效，改用 align-items */
     border-radius: 5px;
     color: #008766;
     background-color: #99E2D0;
     padding: 7px 12px;  /* 水平内边距更合理，避免宽度硬编码 */
     font-size: 14px;
     font-weight: 600;
     white-space: nowrap; /* 防止换行破坏右上角布局 */
   }

3. 增强响应式鲁棒性（推荐进阶写法）：
   使用 inset + transform 可进一步解耦尺寸依赖，适配不同缩放或动态卡片高度：

   .nouveau {
     inset: 12px auto auto 12px; /* top/right/bottom/left */
     transform: translate(0, 0); /* 显式重置，避免 inherited transform 干扰 */
   }

⚠️ 注意事项：

• 不要移除 overflow: hidden：当图片宽高比异常或标签字体缩放时，该属性可兜底裁剪溢出内容；
• 避免给 .nouveau 设置 width: 80px：固定宽度在小屏下易触发水平滚动或遮挡，应靠 padding 和 white-space: nowrap 控制尺寸；
• 图片建议统一使用 object-fit: cover 并设定 height：确保卡片视觉高度一致，避免因图片加载或尺寸差异导致定位基准浮动；
• 若后续需支持深色模式，建议将颜色值抽为 CSS 自定义属性（如 --tag-bg: #99E2D0），便于主题切换。

最终 HTML 结构无需改动，仅需强化 CSS 定位逻辑。该方案在移动端（320px）、桌面端（1920px）及缩放 125% 场景下均能保持标签稳定锚定于卡片右上角——简洁、语义清晰，且完全兼容现代浏览器（Chrome 87+ / Firefox 66+ / Safari 14.1+）。