头像容器必须同时设置position: relative和overflow: hidden；前者建立定位上下文使状态点准确定位，后者强制裁剪确保圆角内显示且不溢出。
头像容器必须设 position: relative 和 overflow: hidden
不加这两条，状态点会飘出头像边界或错位。很多开发者只给 <img> 加 border-radius: 50%，但 <img> 本身不能当定位上下文——它不是块级容器，无法承载绝对定位的子元素。状态点（比如右下角小圆点）必须放在一个包裹 <div class="avatar"> 里，这个 <code><div> 才是真正的定位锚点。<p>常见错误现象：<br>
- 状态点在小屏上被裁掉一半<br>
- 悬停时点突然跳到左上角<br>
- 圆角头像边缘露出状态点的直角边</p>
<ul>
<li>
<code>position: relative 是为了给状态点提供定位参考系
overflow: hidden 是为了解决 border-radius: 50% 对子元素裁剪失效的问题——父容器圆角不会自动裁剪子元素，必须靠 overflow: hidden 强制裁剪aspect-ratio: 1 / 1 锁定正方形，避免拉伸导致状态点偏移状态点用 <span></span> 而不是伪元素 ::after
伪元素在移动端热区太小、无法响应点击，也不方便 JS 控制显隐和颜色。直接用 <span class="status-dot"></span> 更可控。
关键参数差异：
- 尺寸用 0.5em 或 0.375rem，别用 8px —— 否则缩放或高DPI屏下糊成一片
- 定位用 right: 0.25em; bottom: 0.25em;，不是 right: 4px; bottom: 4px —— 这样能随头像大小自适应
- 颜色用 CSS 自定义属性，如 --status-online: #4ade80，JS 只切类名，不硬写 style.backgroundColor
- 给
<span></span>加pointer-events: auto，否则默认无点击热区 - 加
transition: background-color 0.2s ease，避免颜色突变；别加opacity或transform过渡——小圆点不需要入场动画 - 服务端返回的状态字段名可能是
is_online、presence或status，前端映射逻辑要统一，别在模板里塞三元判断
响应式下状态点位置偏移怎么稳住
固定像素定位在不同设备上会失准。比如 right: 4px 在 320px 宽屏上可能把点压到头像外侧，在 1920px 屏上又缩进太多。
真正有效的做法是用相对单位 + 显式控制头像尺寸：
- 小屏（
max-width: 480px）：头像width: 40px，状态点font-size: 0.375rem，定位right: 0.1875rem; bottom: 0.1875rem - 中屏（
481px – 768px）：头像width: 50px，状态点font-size: 0.4375rem - 大屏（
min-width: 769px）：头像width: 60px，状态点font-size: 0.5rem
别用 vw 计算偏移量——视口宽度连续变化会导致状态点轻微抖动，肉眼可察觉。
z-index 不生效？先检查定位链是否断裂
状态点盖不住头像，或者被其他组件遮挡，大概率不是 z-index 值不够，而是层叠上下文断了。
典型坑：
- 父容器（.avatar）没设 position: relative，状态点往上找最近已定位祖先，结果锚定到某个无关的 section 上
- 头像所在卡片用了 position: relative 但没设 z-index，导致其子元素的状态点被同级其他卡片压住
- 状态点本身没设 position: absolute，z-index 对 static 元素无效
- 状态点必须同时满足：有
position: absolute、在position: relative的父容器内、z-index值大于同级其他定位元素 - 如果整个头像模块嵌在 Modal 或 Dropdown 里，注意这些组件常自带
z-index: 1000+，状态点至少设z-index: 1001 - 避免全局滥用大数值（如
z-index: 9999），推荐按层级分段：弹层 1000–1099，浮层 2000–2099，状态点用 2001 就够
实际最易被忽略的是容器溢出控制和定位上下文完整性——调了半天颜色和位置，最后发现只是 .avatar 少写了 overflow: hidden 或漏了 position: relative。
