position: absolute 使头像脱离文档流致卡片塌陷，应设父容器 position: relative、min-height，并用 transform 替代 top/right 实现稳定对齐；注意 z-index 层级与 iOS fixed 背景限制。
position: absolute 会让头像脱离文档流，导致卡片内容塌陷
社交分享卡片里把 img 用 position: absolute 贴在背景图右上角，结果下面的文字跑到了背景图上面、高度算不准——这是最常见现象。根本原因是绝对定位元素不参与父容器高度计算，而卡片容器（比如 .card）又没设固定高或最小高。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给卡片容器加
position: relative，这是absolute定位的参照基准，缺它头像会相对于整个页面定位 - 用
min-height或明确的height防止塌陷，尤其当背景图是background-image时，它本身不撑开容器 - 头像元素不要放在背景图之后再追加，而是作为子元素直接写在 HTML 里，避免 JS 动态插入引发渲染时机问题
用 transform 替代 top/right 实现更稳定的边缘对齐
写 top: 16px; right: 16px 看似简单，但一旦卡片响应式缩放或字体大小变化，像素偏移就容易错位；更麻烦的是，某些安卓 WebView 对 right 解析不稳定，头像可能飘到屏幕外。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用
top: 0; right: 0; transform: translate( -100%, -100% )，让头像右上角锚点“真正贴住”右上角，不受父容器 padding 或 border 干扰 - 如果头像本身有圆角或边框，记得用
box-sizing: border-box，否则width/height不含边框，transform 偏移会偏差 1–2px - 避免在
@media里重复写整套定位规则，优先用transform: scale()或margin微调尺寸，而不是重设top/right
z-index 层级冲突导致头像被遮挡或点击失效
头像明明写在 HTML 最后，却盖不住背景图上的文字按钮；或者 hover 时头像没反应——大概率是 z-index 没生效，或者父容器形成了新的层叠上下文（stacking context），把头像锁在了底层。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查头像父容器是否设置了
opacity、filter、transform（非 none）、will-change，这些都会隐式创建层叠上下文，让子元素的z-index相对它计算，而非全局 - 头像自身至少设
z-index: 10，其父容器（如.card）设z-index: 1，确保层级可预期 - 如果卡片用了
background-blend-mode或伪元素叠加背景，确认伪元素没有意外设置了更高z-index或position
移动端 Safari 中 background-attachment: fixed 导致定位失效
想让背景图固定、头像悬浮在它边缘，于是给卡片加了 background-attachment: fixed，结果 iOS 上头像位置乱跳，甚至随滚动抖动——这不是 bug，是 Safari 的主动限制：它不支持在非 body 元素上正确解析 fixed 背景与绝对定位的组合。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 彻底放弃
background-attachment: fixed在卡片中的使用，改用两张图：一张全屏固定背景（用body::before），一张作为卡片内容区的半透明遮罩或装饰图 - 如果必须模拟视差效果，用
transform: translateY()+scroll事件监听，但注意 iOS scroll event 触发频率低，优先用IntersectionObserver或 CSSscroll-snap替代 - 在 iOS 测试时，务必真机验证，模拟器无法复现该问题
最易被忽略的一点：头像的 src 加载失败时，alt 文字默认会占据位置并影响定位逻辑；建议统一用 background-image 渲染头像，或加 img { font-size: 0 } 消除替换文本的行高干扰。
