用css实现右上角“置顶”角标需父容器设position: relative，角标用伪元素::after绝对定位（top: 0; right: 0;），并确保层叠上下文正确以避免z-index失效。
怎么用 CSS 实现右上角“置顶”角标
纯 HTML 没有内置的“置顶”语义标签，<aside></aside> 或 <section></section> 都不自带角标效果。真正起作用的是 CSS 定位 + 伪元素或额外标签。最稳妥的做法是给话题容器加一个 class="pinned"，再用绝对定位把角标“钉”在右上角。
常见错误是直接对 <h2></h2> 或 <article></article> 使用 position: absolute，结果导致布局塌陷或与其他元素重叠。正确做法是让父容器设 position: relative，角标自身设 position: absolute 并配 top: 0; right: 0;。
- 角标内容建议用
::after伪元素生成，避免污染 DOM 结构 - 若需支持屏幕阅读器，可加
aria-label="已置顶话题"到角标容器 - 移动端要注意
right: 0在小屏下可能被截断，建议加transform: translateX(50%)微调
为什么 z-index 经常失效
角标明明写了 z-index: 999 却被遮住，大概率是因为父容器没形成层叠上下文。CSS 的 z-index 只在“同级层叠上下文”中生效，而默认情况下，所有元素都在根层叠上下文中——但一旦父元素用了 opacity 、<code>transform、filter 或 will-change，就会悄悄创建新层叠上下文，把子元素的 z-index 锁死在内部。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 检查父容器是否无意中加了
transform: translateY(0)或opacity: 0.99 - 确保角标和它要覆盖的内容处于同一层叠上下文，必要时给父容器加
z-index: 1和position: relative - 调试时可用浏览器开发者工具的“Layers”面板查看实际层叠结构
要不要用 <sup></sup> 标签做角标
不推荐。<sup></sup> 是语义化标签，专用于上标（如数学公式、脚注编号），不是视觉装饰。用它塞“置顶”文字会误导屏幕阅读器，也难控制尺寸、颜色和位置——它默认带行高偏移和字体缩放，且无法脱离文本流做精确定位。
- 如果只是想快速原型，
<span class="badge pinned-badge">置顶</span>更可控 - 需要支持深色模式？直接在 CSS 中用
@media (prefers-color-scheme: dark)调整角标背景色 - 若角标需点击操作（比如取消置顶），务必加
tabindex="0"和role="button"
React/Vue 项目里怎么动态渲染角标
核心逻辑不变：仍是靠 class 控制显隐，CSS 控制样式。关键区别在于“什么时候显示”。不要在模板里写 v-if="item.isPinned" 然后重复一堆 <span></span>，而是封装成组件或指令。
- Vue 可写
v-pinned自定义指令，自动追加角标并绑定事件 - React 推荐用 hooks 封装逻辑，例如
usePinnedBadge(isPinned)返回 className 和 aria 属性 - 服务端渲染（SSR）场景下，确保角标样式不依赖 JS，否则首屏可能漏掉或闪动
角标看似简单，但跨框架、跨设备、跨可访问性要求时，最容易被忽略的是语义与行为的一致性——比如点了“取消置顶”按钮后，角标消失但 aria-live 没通知，视障用户就完全不知道状态变了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
