Flex布局本身不直接实现右上角漂浮标签，因其为一维布局模型；需结合position: relative容器与position: absolute标签定位，Flex仅辅助卡片内部内容对齐。
用 Flex 布局本身不直接实现“右上角漂浮标签”，因为 Flex 是一维布局模型，擅长控制主轴/交叉轴上的对齐与分布，但不负责绝对定位。卡片右上角的标签（比如「推荐」「新品」「热卖」）本质是**脱离文档流、覆盖在内容之上的装饰性元素**，需结合 定位 + Flex 辅助对齐 来完成，而不是仅靠 flex 实现“漂浮”。
核心思路：容器设为 relative，标签 absolute 定位，Flex 仅用于内部内容排布
把卡片整体设为 position: relative，给标签加 position: absolute 并用 top 和 right 拉到右上角——这是最稳定、浏览器兼容性最好的做法。Flex 在这里的作用是：让卡片主体内容（标题、图片、描述等）自身保持良好对齐，不影响标签定位。
- 卡片容器必须显式设置
position: relative，否则 absolute 标签会相对于最近已定位祖先或视口定位，容易“飞走” - 标签元素建议放在卡片 DOM 结构的最前面或最后面，但不要嵌套在其他 flex 子项里（避免被 flex 的对齐规则干扰）
- 标签本身可设
display: inline-flex或display: flex，方便内部图标+文字水平居中
典型 HTML 结构与关键 CSS
结构示例（语义清晰、层级可控）：
<div class="card"> <span class="tag">新品</span> <img src="..." alt="..."> <h3>iPhone 16 Pro</h3> <p>A18 芯片，钛金属机身</p> </div>
对应样式：
.card {
position: relative;
padding: 12px;
border-radius: 8px;
background: #fff;
}
.tag {
position: absolute;
top: 8px;
right: 8px;
background: #ff4757;
color: white;
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
z-index: 2;
}
/* 如需标签内图标+文字居中，可加 */
.tag {
display: inline-flex;
align-items: center;
gap: 4px;
}为什么不用 Flex 把标签“推”到右上角？
有人尝试给卡片设 display: flex; justify-content: flex-end; align-items: flex-start;，再把标签作为子项——这会导致两个问题：
- 标签会参与 flex 排列，挤压其他内容空间，破坏卡片原始结构
- 无法真正“覆盖”在右上角；它只是 flex 容器里最右边的一个子项，一旦卡片高度变化或内容换行，位置就不可控
- 移动端缩放或字体放大时，flex 排列易错位，而 absolute + relative 组合更鲁棒
进阶：适配不同尺寸卡片的标签位置
如果卡片高度不固定（如图文混排），又想确保标签始终贴右上角且不遮挡内容，可：
- 给
.tag加transform: translate(50%, -50%)配合top: 0; right: 0;，实现基于右上角锚点的精准偏移 - 用
inset简写（现代浏览器支持）：inset: 8px auto auto 8px;替代 top/right/bottom/left 单独写 - 配合媒体查询，在小屏下改用
top: 4px; right: 4px; font-size: 10px;缩小标签
