用 position: fixed 实现侧边栏图像固定需配合 top/right 偏移、z-index 防遮挡，并避开 transform 等触发层叠上下文的祖先；尺寸须主动控制，推荐 CSS 自定义属性统一管理。
侧边栏固定图像用 position: fixed 最直接
图像在侧边栏保持不动（比如随页面滚动始终停在右上角），核心不是靠 float 或 display: inline-block，而是用 position: fixed 配合方向偏移。它让元素脱离文档流，相对于视口定位，滚动时位置不变。
常见错误是只写 position: fixed 却没设 top/right 等偏移值，结果图像卡在左上角（默认 top: 0; left: 0）；或者父容器加了 transform、perspective 或 will-change，导致 fixed 失效（此时会相对该父容器定位，而非视口）。
-
right: 20px+top: 100px可把图钉在右侧距顶100px处 - 加
z-index: 1000避免被其他内容遮挡 - 若侧边栏本身有横向滚动（如 overflow-x: auto），需确保图像不随其滚动——
fixed天然满足这点，但前提是它没被嵌套在带transform的祖先里
图像尺寸和响应式要主动控制
fixed 元素不会自动适应侧边栏宽度变化，比如小屏下右侧空间变窄，图像可能溢出或遮挡内容。不能依赖父容器的 width，得自己设 max-width 或用 vw 单位。
- 用
width: 80px+height: auto保比例缩放 - 小屏适配可加媒体查询：
@media (max-width: 768px) { .sidebar-img { width: 60px; right: 10px; } } - 避免设
width: 100%——它会拉伸到整个视口宽，不是侧边栏宽
别忽略 z-index 层叠上下文陷阱
即使写了 z-index: 9999，图像仍可能被盖住，大概率是某个祖先元素创建了新的层叠上下文（比如设置了 opacity 、transform、filter 或 will-change）。这时 fixed 图像的 z-index 只在那个祖先内部生效，无法突破出去。
立即学习“前端免费学习笔记（深入）”；
- 检查图像直系父元素及向上所有祖先，用浏览器开发者工具看 computed 样式里的
transform和opacity - 最稳妥解法：把图像移出有层叠上下文的容器，直接挂到
下（但需注意 JS 操作或 SSR 渲染顺序） - 临时验证：给图像加
outline: 2px solid red，确认是否真被遮住，还是透明度/混合模式导致“看不见”
用 CSS 自定义属性方便后期调整
如果项目里多个侧边栏图像位置、大小需要统一管理（比如设计系统规范），硬编码像素值后期难维护。用 css custom properties 把偏移量和尺寸抽出来更可控。
body {
--sidebar-img-right: 24px;
--sidebar-img-top: 80px;
--sidebar-img-width: 72px;
}
.sidebar-fixed-img {
position: fixed;
right: var(--sidebar-img-right);
top: var(--sidebar-img-top);
width: var(--sidebar-img-width);
height: auto;
}
这样改一处变量，所有实例同步更新，也方便用 JS 动态切换主题或布局模式。
真正麻烦的往往不是加 fixed 这一行代码，而是它和周围 CSS 的隐式交互——特别是层叠上下文和视口单位在不同设备上的表现差异，容易上线后才发现右上角图像在 iPad 上偏移错位，或者被导航栏遮住半截。
