用 position: absolute 贴飘带需父容器设 position: relative；左上角用 top: 0; left: 0; transform-origin: top left; skewX(-20deg)；右上角用 top: 0; right: 0; transform-origin: top right; skewX(20deg)；z-index 设 1–2，pointer-events: none，并加 translateZ(0) 防闪烁。
怎么用 position: absolute 把飘带贴到容器左上/右上角
关键不是“放上去”，而是“贴住又不溢出”。position: absolute 默认以最近的 position: relative 祖先为参考系，所以父容器必须设 position: relative，否则会往上找直到 ，飘带就飞了。
左上角飘带：用 top: 0; left: 0;；右上角：用 top: 0; right: 0;。别写 bottom 或 transform: translateY 来“凑位置”，那会导致响应时错位。
- 父容器没加
position: relative→ 飘带相对视口定位，一缩放就跑偏 - 用了
margin或padding调整飘带位置 → 实际是靠“猜值”，换字体或字号就失效 - 想让飘带宽度撑满容器顶部 → 错，飘带是装饰元素，应固定宽高，靠
transform: skewX倾斜，不是靠拉伸
为什么用 skewX(-20deg) 而不是 rotate()
rotate() 会让整个元素绕中心旋转，飘带两端会翘出容器边界，尤其在小屏幕下容易被截断；skewX 是沿 X 轴倾斜，更接近真实挂角布条的视觉变形，且边缘仍能紧贴容器顶边。
典型值是 -15deg 到 -25deg，负值向左倾（左飘带）或向右倾（右飘带）。右飘带用 skewX(20deg)，注意别漏了正负号。
立即学习“前端免费学习笔记（深入）”；
- 用
rotate(-20deg)→ 飘带右上角会伸出容器，overflow: hidden一加就切掉一半 - 只 skew 不加
transform-origin→ 倾斜中心默认在元素中心，导致顶部脱离容器边线 - 正确做法：左飘带设
transform-origin: top left;，右飘带设transform-origin: top right;
如何避免飘带遮挡内容或被其他元素盖住
飘带是纯装饰，必须确保它不干扰可点击区域和文字流。z-index 不是越大越好，设成 1 或 2 足够，太高反而容易压住下拉菜单、弹窗等交互元素。
更关键的是：飘带本身不能有 pointer-events: auto（默认值），否则鼠标悬停会穿透失败；如果飘带含链接或按钮，才单独给子元素开 pointer-events，主体保持 pointer-events: none。
- 父容器用了
overflow: hidden→ 飘带超出部分被裁，但倾斜后顶部本该贴边，裁了就露白边 - 飘带用了
background: linear-gradient但没设background-clip: padding-box→ 渐变从边框开始算，视觉上像“浮起来”了一层 - 移动端横屏时飘带宽度没限制 → 用
max-width: 120px比用百分比更稳
IE11 兼容时 skewX 出现锯齿或错位怎么办
IE11 对 transform 的 subpixel 渲染支持差，skewX 在非整数像素位置会模糊或跳动。解决方案不是降级为图片，而是加一层硬件加速提示：transform: skewX(-20deg) translateZ(0);。
同时避免在飘带上用 border-radius 或 box-shadow，IE11 渲染这些叠加 transform 时极易失真。阴影改用伪元素 + filter: drop-shadow() 更可靠。
- 写了
will-change: transform→ IE11 不识别，还可能引发重绘异常，直接删掉 - 用
@supports (transform: skewX)包裹样式 → IE11 完全不进这个块，得用 IE 条件注释或 JS 特征检测兜底 - 最简兜底：IE11 下用单色矩形 + 小角度
rotate，接受轻微错位，比完全失效强
opacity 变化，如果飘带没提前升层（transform: translateZ(0)），旧版 Chrome 和 Safari 就会频繁闪烁。这点没加，上线后用户一滚动就闪，排查起来特别费时间。 
