直接写 top/right 不够优雅，因硬编码像素值在响应式场景下易失效，且多徽标时维护成本高；自定义属性将位置逻辑抽离为可计算、可继承的变量，配合 inset 和 calc() 实现灵活精准定位。
为什么直接写 top 和 right 不够“优雅”
硬编码像素值（比如 top: 8px; right: 8px;）在响应式场景下极易失效：小屏时徽标贴边甚至溢出，大屏时又显得太远；改个字体大小或容器 padding，就得同步手动调所有徽标偏移。更麻烦的是，多个徽标类型（红点、数字、文字）共存时，维护成本指数级上升。自定义属性不是为了炫技，而是把“位置逻辑”从样式里抽出来，让偏移量变成可计算、可继承、可条件切换的变量。
--badge-inset 是核心定位锚点变量
用 inset 替代四方向单独声明，语义更清晰，也天然支持逻辑属性（LTR/RTL 自动适配）。配合自定义属性，可以统一控制所有角标的位置基准：
.badge {
position: absolute;
inset: var(--badge-inset, 0) auto auto var(--badge-inset, 0); /* 默认右上 */
transform: translate(50%, -50%);
}
<p>/<em> 右上角（默认） </em>/
.card { --badge-inset: 8px; }</p><p>/<em> 左下角 </em>/
.card--bottom-left { --badge-inset: auto 8px 8px auto; }</p><p>/<em> 响应式缩放 </em>/
@media (max-width: 480px) {
.card { --badge-inset: 4px; }
}</p>
-
inset的四个值顺序是top right bottom left，设为auto表示不约束该方向 - 必须搭配
transform: translate(50%, -50%)才能实现右上角内侧精准贴合，否则inset只控制左上角锚点 - 变量名带
--badge-前缀，避免和全局变量冲突；var(--badge-inset, 0)提供安全回退
徽标尺寸与偏移联动靠 --badge-size 和 calc()
当徽标本身尺寸变化（比如从 16px 红点升级为带文字的 24px 徽章），仅调 --badge-inset 还不够——偏移量应随尺寸同比例缩放。这时用 calc() 关联两个变量：
.badge {
width: var(--badge-size, 16px);
height: var(--badge-size, 16px);
inset: calc(var(--badge-size, 16px) / 2) auto auto calc(var(--badge-size, 16px) / 2);
transform: translate(50%, -50%);
}
<p>.card--large { --badge-size: 24px; }</p>
- 红点类徽标建议固定宽高，用
border-radius: 50%；文字类则用min-width+line-height配合em单位 -
calc()中不能混用单位（如16px / 2可以，1rem / 2也可以），但不能写1rem / 2px - 如果父容器用了
scale()或transform，calc()计算结果仍会受其影响，此时需额外加transform: scale(1)重置
容易被忽略的层叠与交互陷阱
自定义属性管得了位置和尺寸，但管不了渲染层级和鼠标穿透——这两点一旦漏掉，徽标再“优雅”也白搭：
- 父容器有
overflow: hidden（常见于卡片、轮播图容器），徽标会被裁切：要么删掉该声明，要么给徽标加transform: translateZ(0)强制提升合成层 -
z-index必须显式设置，且不能依赖默认值：即使只设z-index: 1，也要确保父容器没意外创建新层叠上下文（比如用了opacity: 0.99或will-change: transform） - 默认加
pointer-events: none，防止挡住底下的头像或按钮；若徽标内部有关闭按钮，则只给那个子元素加pointer-events: auto
真正难的不是写对一行 inset，而是整套变量体系和渲染规则之间不打架。变量只是开关，背后那套定位逻辑、层叠规则、交互预期，一个没对齐，视觉就崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
