定位Position
样式与布局基础让元素跟随正常排版，或固定到指定位置
position 控制元素是否留在原有排版中，以及 top、right、bottom、left 参照哪里计算。普通内容优先使用正常布局；浮层、角标和固定导航才需要相对、绝对或固定定位。
NEW
✓ 卡片写了 relative，角标贴在卡片右上角
NEW
✕ 卡片没写 relative，角标飞到整个容器角落 →
什么时候用
- 在相对定位的卡片中放置绝对定位的角标3
- 右下角悬浮按钮：fixed 钉在视口，滚动也不动＋
- 吸顶导航、筛选栏：sticky 滚到点才吸住，见 吸顶 Sticky筛选栏 · sticky 吸顶
- 让下拉菜单和文字提示贴着触发元素出现全部状态全部状态进行中
什么时候不用
- 绝对定位找错参照父级，元素会偏离预期位置角标飞到角落卡片没写 relative，absolute 参照了 body
- 元素还是 static 就写 层级 Z-Index：根本不生效z-index: 99 但没设 position
- 拿 fixed 当吸顶用：脱离文档流，不是盖住内容就是要手动补占位fixed 栏fixed 脱离文档流，把第一行内容盖住了
- 整页全靠 absolute 硬摆坐标：内容一变长，全部错位top:6 left:8top:18 left:62top:42 left:28全写死坐标，内容一变长全错位
组成结构 · Anatomy
角标top: 0 · right: 0z-index: 1 压得住内容
1参照物Containing Blockabsolute 以最近的非 static 祖先为坐标系，找不到就是 body
2定位元素Positioned Elementposition 不是 static 的那个，才能用偏移量
3偏移量Offsetstop / right / bottom / left，决定离参照物各边多远
4层叠Stackingz-index 可用于定位元素和 flex/grid 子项；先比较所在的层叠上下文，再比较数值
常见变体 · Variants
默认Static
static
默认就是它，跟着文档流排队
相对自己Relative
relative
微调位置，或给子元素当锚点
相对祖先Absolute
3
角标浮层，相对最近的定位祖先
钉在视口Fixed
悬浮按钮、固钉操作，滚动不跟走
到点吸住Sticky
表头、导航滚到设定位置才吸住
典型使用场景
卡片右上角角标
设计小分队
新版首页的稿子传上来了
Vibe 助手
你的页面已经部署好了
右下角悬浮按钮
吸顶导航
下拉与气泡浮层
成员列表
小狸管理员
阿机访客
全部角色 ✓
管理员
编辑者