position: fixed 是实现全局悬浮的唯一可靠方案，因其始终相对于视口定位、不受滚动影响；absolute 则依赖最近已定位祖先，易随父容器偏移；需注意 z-index、overflow 裁切及移动端兼容性问题。
用 position: fixed 是最直接、最可靠的方式，前提是图片不依赖父容器布局，且你明确它该“钉”在视口哪个角落或坐标。
为什么不用 position: absolute 做全局悬浮
position: absolute 相对于最近的已定位祖先（比如 position: relative 的父盒），一旦父容器滚动或尺寸变化，图片就会跟着偏移或消失。而真正需要“悬浮”的场景——比如客服图标、返回顶部按钮——必须无视页面滚动，始终停在屏幕某处。position: fixed 才是唯一匹配这个语义的方案。
- 如果父容器没设
position，absolute会往上一直找，最终可能相对body定位，但依然受页面滚动影响 -
fixed的参考系永远是视口（viewport），滚动时坐标不变 - 移动端某些旧 WebView 对
fixed支持不稳定，需配合@supports (position: fixed)做降级（比如 fallback 到absolute+scroll事件监听）
top/right/bottom/left 怎么选才不翻车
别硬记“左上角用 top 和 left”，先看交互习惯和安全区域：底部右下角（如悬浮按钮）用 bottom: 24px + right: 24px 更稳妥——窄屏下不会被地址栏遮，也避开 iOS 安全区域顶部；居中悬浮（如提示弹窗）优先用 top: 50% + left: 50% + transform: translate(-50%, -50%)，避免因元素宽高未知导致错位。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 避免同时设置
top和bottom（或left和right），浏览器会按规则覆盖，行为不可控 - 用
inset简写更清晰：inset: 20px auto auto 20px等价于top: 20px; right: auto; bottom: auto; left: 20px - 小屏设备（
max-width: 768px）建议改用vw/vh单位微调，比如bottom: 5vh，防止固定像素值在缩放后挤出屏幕
图片本身被裁切或模糊？检查这三项
固定定位的图片常因容器缺失、缩放失配或渲染层问题变糊或只显示一半。核心不是“怎么悬”，而是“怎么让悬着的图还清晰可见”。
- 确保
img标签有明确宽高（或通过aspect-ratio锁定比例），否则object-fit: cover可能意外裁掉关键内容 - 若图片作为背景使用，用
background-attachment: fixed配合background-position，但注意它和position: fixed的img元素互斥——不能混用 - 加
will-change: transform或transform: translateZ(0)触发 GPU 加速，尤其在 iOS 上能缓解滚动时的模糊或闪烁
容易被忽略的 DOM 和样式冲突点
一个 position: fixed 图片突然消失，90% 不是 CSS 写错了，而是被其他层叠上下文吞了，或被 JavaScript 动态移除了。
-
z-index必须为正值，且要大于所有同级层叠上下文（比如header里有z-index: 100，你的图片至少得设101） - 检查是否被
overflow: hidden的父容器裁切——fixed元素本不该受影响，但某些 Android 浏览器或嵌套transform容器会意外创建新的包含块 - 用
pointer-events: none时务必确认是否真不需要点击；误加会导致整个图片无法交互，连click事件都收不到
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
