卡片 position: relative；角标 position: absolute; top: 8px; right: 8px。
卡片宽度变化时角标始终贴在右上角，标题与价格的正常流不被挤压。
产品与设计 · 布局基础
定位Position
选对 position 与定位参照，让元素在正常流、父级或视口之间保持可预测的位置。
切换 position，看角标相对谁、是否占位
同一个「新品」角标，选不同 position、切换父级是否定位、拖动偏移与滚动，观察角标的位置、占位框的有无和锚点读数。
当前 position: absolute：角标脱离正常流（占位框消失），锚定到最近定位祖先——父级卡片。下一步：取消「父级 position: relative」，看锚点跳到谁。
五种取值与定位上下文
面板里刚看到的差异，命名并总结如下；离流与否、相对谁是判断的主轴。
- static：默认值，不参与定位，不接受 top/right 偏移（你在面板拖滑块它没动）。
- relative：相对自身原位置偏移，不离流，原占位框仍在（虚线那块）。
- absolute：脱离正常流，占位消失；锚到最近定位祖先——父级 relative 时贴卡片，父级 static 时爬到外层。
- fixed：脱离正常流，锚到视口，页面滚动也不动。
- sticky：阈值前在正常流，滚动超阈值贴住滚动容器边缘，滚回去复原。
- 定位上下文：由最近
position≠static的祖先决定；一个都没有就落到初始包含块（视口）。
什么时候用 position
先有具体症状或需求，再选值；别把 position 当成万能对齐工具。
- 角标、tooltip、小浮层贴在父级内：父级
relative+ 子级absolute。 - 回到顶部、客服、吸底栏：用
fixed，并留安全边距、可关闭路径与键盘焦点。 - 滚动吸顶的章节工具栏、表头：用
sticky（详见 sticky 卡）。 - 微调几像素但不破坏布局：用
relative，原位仍占位。 - 不适合：用绝对定位搭整体页面布局（响应式易崩）；用 margin 硬推角标（宽度一变就错位）。
怎么用：从参照系到验收
最短路径是先定参照系，再设值，最后用真实宽度与滚动验收。
- 确定参照系：相对父级？视口？还是滚动容器？
- 给参照系设
position: relative（或让它成为滚动容器）。 - 给被定位元素设
position+top/right/bottom/left。 - 验收：缩放宽度与滚动后位置仍对、不遮关键内容、键盘焦点可达。
正反例：同一角标，只改定位方式
目标都是把「新品」角标放在卡片右上角；只改定位与父级参照，看用户后果。
角标靠 margin-left/margin-top 推到右上；或父级未设 relative 就 absolute。
宽度一变角标就错位；或角标跑到页面角落，因为定位祖先不是卡片。
快速自测
做一个滚动时始终贴住屏幕右下角的「在线客服」按钮，该选哪种 position？为什么不是 absolute？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。