绿色小圆点偏移因头像容器未设position: relative，导致absolute定位相对于viewport；应设relative并用right:0/bottom:0，加overflow:hidden防裁剪，尺寸用px+border描边，多状态用css变量控制颜色。
定位绿色在线小圆点的位置为什么总偏移？
因为头像容器没设 position: relative，子元素用 position: absolute 时会向上逐级找最近的定位上下文，找不到就相对于 viewport 定位——结果就是小圆点飘到页面左上角。
- 头像外层
<div> 必须加 <code>position: relative（或absolute/fixed） - 小圆点本身用
position: absolute+right: 0+bottom: 0最稳，右下角是视觉默认“状态附着区” - 如果头像用了
border-radius但父容器没溢出裁剪，小圆点可能被切掉——加overflow: hidden到头像容器 - 基础尺寸设为
width: 8px; height: 8px;，再用border: 2px solid #fff做描边，增强清晰度 - 避免用
%（比如width: 10%），它依赖父容器宽度，而头像宽高常不一致 - 需要适配高 DPR 屏时，可加媒体查询：
@media (-webkit-min-device-pixel-ratio: 2)下把宽高提到10px并微调transform: translateZ(0)强制 GPU 加速 - 定义基础样式：
.avatar-status { width: 8px; height: 8px; border-radius: 50%; border: 2px solid #fff; } - 用
--status-color控制填充色：.avatar-status.online { background-color: var(--status-color, #4ade80); } - HTML 中只需切换 class：
<span class="avatar-status online"></span>→<span class="avatar-status away"></span>，配合 JS 更新 - 别用
!important覆盖颜色——它会让后续主题切换、暗色模式适配变得不可维护 - 头像容器设
display: inline-flex时，加align-items: flex-end+justify-content: flex-end，再配合position: relative - 如果是 Grid 布局，给头像项加
justify-self: end; align-self: end;，确保它自己先“坐”到单元格右下 - 检查是否有
vertical-align影响行内元素基线——vertical-align: bottom比middle更可靠
绿色在线小圆点怎么保持大小不随缩放/响应式崩塌？
用 px 写死宽高最直接，但遇到高清屏或缩放会糊；用 em 或 rem 又容易随字体变化意外缩放。真正靠谱的是结合 min-width 和 transform: scale() 的微调。
在线状态要支持多种状态（在线/离线/忙碌/离开），CSS 怎么组织才不混乱？
别给每个状态写一整套 background-color + box-shadow，用 CSS 自定义属性统一控制颜色和阴影强度，状态切换只换一个 class 名。
小圆点在 Flex/Grid 布局里为什么对不齐头像右下角？
Flex 容器默认 align-items: stretch，Grid 默认 align-content: start，都会干扰 absolute 子元素的基准定位点。关键不是改子元素，而是约束父容器的行为。
立即学习“前端免费学习笔记（深入）”；
真正麻烦的不是画出那个小圆点，而是它在各种嵌套、缩放、多端、主题切换场景下始终“粘”在头像右下角不偏不晃。多数问题其实出在定位上下文链断裂，或者用响应式单位去约束一个本该像素级稳定的视觉标记。
