商品标签必须用真实html元素实现，父容器设position: relative，角标用语义化span，文字直白，动态显示时同步更新aria-hidden。
商品标签（比如「新品」「限时特惠」「包邮」）必须用真实 HTML 元素实现，不能靠 ::after 伪元素或 title 属性糊弄——否则手机端看不见、屏幕阅读器读不到、翻译插件识别不了。
父容器一定要设 position: relative
这是所有角标定位的起点。没这句，position: absolute 的角标会一路往上找最近的定位祖先，极大概率飘到页面顶部或被截断。
- 哪怕父容器原本是
display: flex或inline-block，也得显式加position: relative - 不要依赖「它本来就有定位」这种假设，老项目里常有隐藏的 transform 或 opacity 暗中创建新层叠上下文，导致定位基准漂移
- 如果父容器本身是
position: absolute或fixed，也要确保它的父级能提供稳定参照，必要时手动补一层 wrapper
角标元素用 div 或 span，别用 <sup></sup>
<sup></sup> 是语义化上标标签，专用于数学公式或脚注编号。塞「9.9折」进去，屏幕阅读器会读成「九点九折上标」，用户完全听不懂。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 推荐用
<span class="tag tag-new">新品</span>这类结构，语义清晰、样式可控 - 文字内容必须直白，别写「New」或「Featured」，中文场景下就写「新品」「热卖」「包邮」
- 如果标签需点击（如筛选），加
tabindex="0"和role="button"，否则键盘用户无法聚焦
右上角定位要避开 transform: translate() 兼容性坑
IE9–10 不支持 transform: translate(-50%, -50%)，但很多现成代码直接抄这个写法，结果在老系统里角标错位甚至消失。
- 稳妥写法是：
top: 0; right: 0; margin: 4px;，再配合font-size: 12px和border-radius: 2px控制尺寸 - 需要旋转效果（如斜角标签）时，用
transform: rotate(45deg)没问题，IE9+ 都支持，但别混用 translate - 移动端小屏下
right: 0可能贴边被裁，可微调为right: 4px并加overflow: visible到父容器
动态显示时必须同步 aria-hidden
用 JS 插入或隐藏角标后，如果只改 display: none 或 visibility: hidden，屏幕阅读器仍可能把隐藏内容读出来。
- 正确做法：显示时设
aria-hidden="false"，隐藏时设aria-hidden="true" - 不需要额外加
aria-label，角标文字本身已具完整语义；重复标注会让辅助技术读两遍 - 若角标内容随数据变化（如库存告罄 → 显示「缺货」），记得同时更新
textContent和aria-hidden
最易被忽略的不是样式细节，而是「角标是否真被用户感知到了」——它得在手机上可见、在键盘导航中可达、在读屏软件里可读。视觉对齐只是第一步，语义和行为对齐才是上线前必须验的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
