定位
Position
中级通用定位（Position）是 CSS 控制元素如何相对原位置、祖先元素或视口摆放的属性。它解决浮层、角标和滚动时固定显示等问题，例如让商品卡片的角标贴在卡片右上角。
你可能会说：「我想让商品卡片的折扣角标贴在右上角，但别影响卡片里文字的排列。」
动手看看商品卡片的促销角标
先调角标的位置，再滚动商品列表。注意角标是占着原来的位置，还是贴着卡片，或是滚动时留在顶部。
绝对定位不占原来的空位。卡片作为定位祖先时，top 和 right 从卡片边缘算；关闭开关，它就改为参照外层演示框。
要点定位会怎样改变元素的位置？
- 1
先看元素是否留在原来的位置
static 是默认值，元素按正常布局排列。relative 可以在原位置基础上移动，但原本占的空间还在；absolute 和 fixed 会脱离正常布局，后面的内容不会为它们预留位置。
- 2
偏移量要结合定位方式来看
top、right、bottom、left 用来指定偏移，但要和 position 配合看。例如商品角标设为 absolute，再设 top 和 right，就能让它贴近定位参照区域的右上角；只有偏移值、没有合适的定位方式，通常达不到这个效果。
- 3
绝对定位要找准参照区域
absolute 通常相对最近的已定位祖先元素摆放。所以做卡片角标时，我们会给卡片设 relative，给角标设 absolute。这样角标跟着卡片走，而不是意外跑到页面别处。
- 4
滚动时固定与吸附并不相同
fixed 常用来让元素相对视口保持在固定位置，比如悬浮客服入口。sticky 则先随内容正常排列，滚动到设定的边界后才吸附；做吸顶标题时，通常还要给它设置 top。
容易混淆的地方
定位解决的是元素相对哪里摆放、滚动时是否跟随的问题；弹性布局和网格布局解决的是一组元素怎样排列，所以表单字段排队通常先看后两者。z-index 处理已发生重叠时谁盖住谁，它不能代替 position 决定元素贴在哪里。
什么时候用
适合用
- 商品卡片要显示贴在右上角的折扣角标，同时保持商品名称和价格的正常排列。
- 后台长页面需要让分组标题在滚动到顶部时吸附，方便你辨认当前内容所属分组。
- 页面需要一个始终停在视口角落的悬浮客服入口，方便用户滚动后仍能找到它。
不适合用
- 只是想让表单标签和输入框整齐排成两列时，用网格布局更合适，不需要逐个定位。
- 只是想给正文段落之间留出距离时，用 margin 或布局间距控制，不需要移动元素。
- 只是想让导航项在一行里均匀分布时，用弹性布局更合适，不需要给每项设置位置。
练一练选一个答案，看看解释
你在做商品列表：每张卡片都有一个折扣角标，角标要贴在各自卡片的右上角，也不能挤开标题。哪种做法更合适？
让 AI 帮你做复制给 AI Agent 直接用
请在商品卡片组件里用 CSS 定位实现折扣角标：卡片作为定位参照，角标贴在卡片右上角，不占用标题和价格的排列空间。请检查不同卡片内容长度下的位置，并说明你选择的 position 值。