用 position: fixed 实现右下角悬浮视频播放器需外层 div 包裹 video，设 bottom: 20px、right: 20px、z-index: 9999，并加 transform: translateZ(0) 修复 iOS 滚动问题，配合 controls、autoplay muted、max-width 和 pointer-events: auto 确保功能与体验完整。
用 position: fixed 实现右下角悬浮视频播放器
直接加 position: fixed 就能脱离文档流固定在视口右下角，但必须配合 bottom 和 right 定位，且要避免被其他元素遮挡或覆盖。
-
bottom: 20px和right: 20px是常用安全间距，太小容易被系统通知栏或键盘遮住（尤其移动端） - 必须给容器设
z-index: 9999（或足够大的值），否则可能被导航栏、弹窗等盖住 - 视频元素本身（
<video>）建议设width: 320px或max-width: 90vw，防止在窄屏上溢出 - 别忘了加
pointer-events: auto（默认是 inherit，但父层若设了pointer-events: none会导致无法操作控件）
HTML 结构要包裹 <video> 并设 class 或 id
不能只给 <video> 标签加样式，得用一个外层 <div> 包裹，否则 fixed 定位后尺寸和圆角控制会出问题。
<div id="floating-video">
<video controls>
<source src="demo.mp4" type="video/mp4">
</video>
</div>- 外层
<div>加id或class方便 CSS 精准控制 -
controls属性必须保留，否则用户无法暂停/音量调节 - 如果视频需要自动播放（如背景提示），加上
autoplay muted，否则 Chrome/Firefox 会拦截
移动端适配时 position: fixed 可能失效
iOS Safari 和部分安卓 WebView 在滚动时会重置 fixed 元素位置，甚至完全不渲染——这不是 bug，是浏览器为节省资源做的优化。
- 加
transform: translateZ(0)到悬浮容器，可强制触发硬件加速，修复多数 iOS 卡顿 - 避免在
body上设overflow-x: hidden，这会让fixed元素在 iOS 上消失 - 测试时务必真机滚动，模拟器常显示正常但实际失效
- 备用方案：监听
scroll事件，用position: absolute+top/left动态计算位置（性能差，仅作 fallback）
关闭按钮和拖拽功能怎么加
纯 CSS 无法实现拖拽，必须用 JS；关闭按钮则推荐用绝对定位 + 小图标，避免影响视频区域。
立即学习“前端免费学习笔记（深入）”；
- 关闭按钮放在外层
<div>内，position: absolute; top: -12px; right: -12px;，用<button>而非<span>保证可访问性 - 拖拽需监听
mousedown/mousemove，计算鼠标偏移并实时更新style.left和style.top - 注意限制拖拽边界：不能拖到视口外（
Math.max(0, Math.min(window.innerWidth - width, x))） - 拖拽中禁用
user-select: none，否则文字选中会干扰操作
浮动视频看似简单，真正稳定运行的关键不在定位本身，而在各种边界场景的处理：iOS 滚动兼容、拖拽限界、关闭状态持久化（比如刷新后是否恢复）、以及 mute autoplay 的权限逻辑。漏掉任意一个，用户都可能点不动、拖不出、或者一滚动就消失。
