产品与设计 · 布局基础
定位Position
定位先回答“相对谁”：建立清楚的参照物，再让覆盖元素偏移。
把库存角标锚回商品卡
同一张商品卡、同一颗角标。先触发错位，再给正确的父级建立参照。
商品编辑器任务：让库存角标跟着这张商品卡走
先看参照关系：角标有 top/right，但商品卡还不是定位上下文。
面板已经教会的定位关系
- normal flow：普通元素顺序排版；absolute 会离开这条流。
- 参照物要明确：子元素 absolute 会找最近一个非 static 的祖先；面板里就是商品卡的 relative。
- 偏移是相对参照物读的：top/right 不是“离页面右边多少”，要先问它相对谁。
什么时候用，怎么用
角标、关闭按钮、浮层锚点需要覆盖在一个具体物件上时用；正文段落和可换行的主布局仍交给 Flex/Grid。
- 选一个稳定、语义明确的容器。
- 给容器 relative；给覆盖物 absolute 与可读的 top/right。
- 缩窄后确认角标没有遮住标题或主操作。
正反例：同一颗库存角标
角标随卡片移动；读者知道它属于哪件商品。
卡片换宽或文字变长时，角标仍留在旧坐标并挡住别的内容。
快速自测
要让“新”角标固定在一张会随网格移动的卡片右上，最先补哪条？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。