relative 常被当成响应式布局的开关，实际它不改变元素在普通流中的位置，作用只有一个：成为后代绝对定位元素的定位上下文。缺了这一层，下拉菜单与气泡会在窄屏上整体位移。
错位是怎么发生的
/* 缺定位上下文 */
.menu-wrap { /* 没有 position 声明 */ }
.menu { position: absolute; top: 100%; left: 0; }
/* 补上之后 */
.menu-wrap { position: relative; }
.menu { position: absolute; top: 100%; left: 0; }
没有定位上下文时，absolute 元素逐级向外寻找最近的定位祖先，找不到就按初始包含块（等同视口尺度）计算。断点切换后父级宽度变化，子层却按另一套基准定位，位移由此产生。
响应式组件里的用法
- 下拉菜单：触发器容器设 relative，菜单层设 absolute 加 top: 100%；
- 角标与气泡：容器设 relative，标记层设 absolute 并用 transform 微调；
- 卡片覆盖层：卡片设 relative，遮罩用 inset: 0 铺满。
inset: 0 等价于 top、right、bottom、left 四边归零，铺满父容器的定位区域，比逐个方向写更稳。
两个边界
- relative 会生成层叠上下文。父级设了 relative 又带 z-index 时，子层的层级被限制在这个上下文中，跨组件的遮挡关系需要重新核对。
- 不要靠 top、left 偏移做布局微调。偏移不参与布局计算，只影响绘制位置，会留出空白或压住邻居，间距交给 margin 与 padding。
断点检查
窄屏下菜单改成全屏抽屉时，定位方式随之切换：抽屉用 fixed 加 inset，不再依赖父级 relative。断点切换后定位基准是否同步更换，是这类组件最常见的回归点。