必须给父元素加 position: relative 才能使子元素 absolute 定位相对于它；否则会相对于 html 或 body 定位，且 padding 影响偏移起点，flex 布局可避免此问题。
父元素不加 position: relative，子标签一定会“飞走”——这不是 bug，是 CSS 定位机制本身决定的。
为什么 position: absolute 标签总贴不到卡片右上角？
常见现象：写了 .tag { position: absolute; top: 0; right: 0; }，但标签出现在整个页面右上角，而不是卡片内部。
- 根本原因：
position: absolute元素会向上查找「最近的已定位祖先」（即position值为relative、absolute或fixed的祖先），找不到就落到或上 - 卡片容器（如
<div class="card">）若没显式写 <code>position: relative，它仍是static，浏览器直接跳过 - 哪怕卡片有
padding或border，也不构成“定位上下文” - 必须写：
.card { position: relative; }—— 缺了这行，一切absolute定位都失效 - 不需要配
top/left：除非你真想微调卡片自身位置，否则保持top: 0; left: 0;（默认值）即可 - 注意
z-index：如果标签被卡片内容盖住，给.card加z-index: 1，再给.tag加z-index: 2（z-index只对定位元素生效） - 如果
.card有padding: 20px，那top: 0; right: 0的标签实际离 border 还有 20px 空隙 - 想真正“顶到右上角”？两个稳妥办法：
– 把padding挪到卡片内容区（比如给内部文字容器加padding）
– 或用transform: translate(100%, -100%)配合top: 0; right: 0微调（例如让标签右上角对齐卡片右上角） - 避免硬写负值：
top: -10px; right: -10px在响应式或字体缩放时容易错位 - 如果卡片需要视觉上包裹标签区域，手动设
min-height或height（适用于固定尺寸场景） - 更灵活的做法：用
padding-bottom占位，比如标签高 32px、距底 8px，就加padding-bottom: 40px - 真正想避免这类问题？考虑改用
display: flex+justify-content: flex-end+align-items: flex-start实现右上角标签，不依赖定位
position: relative 在卡片上只起一个作用：开启定位上下文
它本身不移动元素，也不改变布局流，纯粹是为子元素提供坐标系锚点。
标签偏移量从哪算起？别被 padding 坑了
top: 0; right: 0 并不是紧贴卡片的 border 边缘，而是从父元素的 padding box 左上角开始计算。
卡片高度塌陷？那是 absolute 的正常行为
加了 position: relative 后，卡片背景色/边框只包住文字内容，标签像浮在半空——因为 position: absolute 元素完全脱离文档流，父容器计算高度时“看不见”它。
最易忽略的一点：所有定位逻辑都建立在「父容器显式声明 position: relative」这个前提上。漏掉这一行，后面所有 top、right、z-index 都是在给空气调试。
