如何实现CSS中头像带状态标识，定位绿色在线小圆点效果？

本文共计901个文字，预计阅读时间需要4分钟。

由于头像容器未设置定位，子元素使用`position: absolute`时，会向上逐级查找最近的定位上下文。找不到定位上下文时，则相对于viewport定位——结果就是小圆点飘到页面左上角。

• 头像外层 <div> 必须加 position: relative（或 absolute/fixed）
• 小圆点本身用 position: absolute + right: 0 + bottom: 0 最稳，右下角是视觉默认“状态附着区”
• 如果头像用了 border-radius 但父容器没溢出裁剪，小圆点可能被切掉——加 overflow: hidden 到头像容器

绿色在线小圆点怎么保持大小不随缩放/响应式崩塌？

用 px 写死宽高最直接，但遇到高清屏或缩放会糊；用 em 或 rem 又容易随字体变化意外缩放。真正靠谱的是结合 min-width 和 transform: scale() 的微调。