z-index不生效是因为父容器未设置position属性，导致元素处于static定位而无法进入层叠上下文；cover图应包裹position: relative，avatar用absolute配合transform微调；object-fit用于img标签，background-size用于背景图；头像需正方形原始尺寸、border-radius: 50%、加translateZ(0)优化渲染；定位优先用bottom/right而非top/left，iOS需注意100vh缩水问题。
cover图和avatar重叠时z-index不生效？
因为父容器没设position，z-index在默认的static定位下完全无效。这不是层级写错了，是“根本没进入层级系统”。
- 封面图（cover）必须用
position: relative或absolute包裹一层，哪怕只是加个position: relative空样式 - 头像（avatar）建议用
position: absolute，top/right/bottom/left配合transform: translate()微调，比纯left/top更稳定 - 别给cover本身设
z-index: -1——它可能被body背景吃掉，尤其在Safari里
cover图拉伸变形或留白？用object-fit还是background-image？
二者行为完全不同：object-fit作用于<img alt="CSS布局实战之社交媒体个人主页_封面图与头像的层级布局" >标签，background-size控制的是CSS背景。选错就等于从第一步开始错。
- 如果cover是
<img alt="CSS布局实战之社交媒体个人主页_封面图与头像的层级布局" >标签：优先用object-fit: cover+width: 100%; height: 100%，兼容性到IE9+ - 如果cover是背景图（比如通过
background-image设置）：必须配background-size: cover，且父容器需有明确宽高，否则cover无参照 - 移动端慎用
background-attachment: fixed——iOS Safari会强制重绘，导致头像闪烁甚至消失
头像圆角边缘发虚或锯齿？
不是图片分辨率问题，是浏览器对border-radius + transform组合渲染的精度妥协，尤其在Retina屏上明显。
- 确保头像
<img alt="CSS布局实战之社交媒体个人主页_封面图与头像的层级布局" >本身是正方形原始尺寸（比如200×200），不要靠CSS强行缩放 - 圆角统一用
border-radius: 50%，避免50% 50% 0 0这类写法，部分安卓WebView会误判 - 加一行
transform: translateZ(0)或will-change: transform，触发GPU加速，能显著减少毛边
不同设备下头像位置偏移？
绝对定位的top/left值在响应式布局里极易失效，尤其当cover高度由vh单位决定、而页面有滚动条时，视口计算会出偏差。
立即学习“前端免费学习笔记（深入）”；
- 头像定位优先用
bottom: 20px; right: 20px代替top: xxxpx，避开顶部状态栏/地址栏干扰 - 如果必须用top，改用
top: calc(50vh - 60px)这类动态计算，而不是固定像素值 - 在iOS上测试时记得关掉“显示屏幕顶部指示器”设置——它会让
100vh实际变成~90vh，导致整个布局下坠
事情说清了就结束。最麻烦的永远不是怎么堆样式，而是哪一层没设position、哪个vh在iOS里偷偷缩水、哪张头像被transform模糊了边缘——这些点不盯住，调一天也看不出毛病在哪。
