角标位置异常的根本原因是父容器未设置position: relative或存在overflow: hidden；必须用包裹div设relative定位上下文，避免依赖img或flex容器，同时注意圆角裁剪、响应式偏移及定位参考系变化。
角标能显示，但位置飘到页面右上角或被切掉一半——根本原因不是 top 和 right 写错了，而是父容器没设 position: relative，或者设了却漏了 overflow: hidden。
父容器必须设 position: relative，且不能直接加在 <img> 上
浏览器里 position: absolute 的角标会逐级往上找「最近的已定位祖先」。如果图片外层没设 position: relative，它就一路找到 <body>，角标自然飞出去。
-
<img>是替换元素，不支持overflow: hidden，所以不能直接给它设position: relative来当定位上下文 - 必须用一个包裹
<div>，比如.image-wrapper，并显式加position: relative - 推荐同时加
display: block或inline-block，避免 inline 元素导致定位基准异常 - 别依赖 flex 容器自动提供定位上下文——它不会，
flex本身不改变定位行为
角标用 position: absolute + top/right，但要防圆角裁剪和响应式错位
写 top: 0; right: 0; 看似简单，但卡片有 border-radius、容器缩放、横竖屏切换时，角标常被切掉或偏移。
- 确认父容器没有隐式或显式的
overflow: hidden（某些 UI 库默认加）；若必须保留圆角，优先用clip-path替代裁剪 - 固定像素值（如
top: 8px）在小尺寸卡片里容易溢出，建议用calc(1rem - 4px)或媒体查询微调 - 避免用百分比写
top/right——它是按父容器宽高算的，不是边距，极易反直觉 - 文字垂直居中偏下？加
display: flex; align-items: center; justify-content: center;最稳，别靠line-height硬凑
用伪元素画三角形角标，比图片或 div 更轻量、可缩放
小图角标在高清屏模糊，加载失败就留白；用 ::before + border 或 clip-path 生成，颜色、大小、旋转全可控。
立即学习“前端免费学习笔记（深入）”；
- 三角形推荐用
border技巧：border-width: 0 0 12px 12px; border-color: transparent transparent #ff4d4d; - 想让三角更锐利或适配圆角？改用
clip-path: polygon(0 0, 100% 0, 100% 100%)，坐标可动态计算 - 颜色统一难维护？用
filter: brightness(0.7)或半透明黑色遮罩复用主色，不用额外变量 - 斜向角标（如“特价”）必须配合
transform-origin: top right和translate微调，否则旋转后锚点漂移
真正麻烦的不是怎么写 absolute，而是当图片嵌在 flex、grid、带 transform 的容器里，或卡片本身有阴影/浮动时，定位参考系会悄悄变化——这时得一层层检查 position 值是否被继承覆盖，而不是反复调 z-index。
