HTML5视频右下角定位需父容器设position: relative，否则video设absolute会相对body定位而失控；正确做法是外层div设relative，video设absolute并用bottom/right偏移加max-width/max-height防溢出。
HTML5 视频无法直接“定右下角”，必须用 CSS position: absolute 配合父容器 position: relative 才能实现——这是新手最容易卡住的地方。
为什么 <video> 自身加 position: absolute 没用？
因为绝对定位是相对于最近的「已定位祖先元素」（即 position 值为 relative、absolute、fixed 或 sticky 的父级）计算的。如果父容器没设定位，<video> 就会往上一直找，最终相对 <body> 定位，位置完全失控。
- ✅ 正确做法：给视频外层套一个
<div class="video-container">，并设position: relative - ❌ 错误做法：只给
<video>加position: absolute; bottom: 0; right: 0;，不处理父级 - ⚠️ 注意：
<body>默认不是定位上下文，不能当锚点用
怎么写才真正在右下角且不遮挡内容？
关键在两个地方：父容器尺寸控制 + 视频自身尺寸与定位偏移的配合。右下角不是“贴边”就完事，得考虑是否要留边距、是否要响应式缩放。
- 父容器建议用
position: relative; width: 100%; height: 100vh;（或具体宽高），否则bottom/right可能失效 - 视频设
position: absolute; bottom: 16px; right: 16px;（数字可调，避免紧贴边缘） - 加上
max-width: 300px; max-height: 200px;防止在小屏上溢出 - 若需保持宽高比，可加
width: auto; height: 100%;并配合object-fit: contain;
移动端适配常见翻车点
iOS Safari 和部分安卓浏览器对 position: absolute 在 <video> 上的表现不一致，尤其在横屏切换或全屏退出后。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
z-index来“盖住其他元素”——先确认层级结构是否合理 - 避免把视频直接塞进
<header>或<footer>这类语义化标签里，它们可能自带定位或 flex 布局干扰 - 测试时务必打开设备模拟器，用
transform: translateZ(0)强制硬件加速有时能缓解渲染错位 - 如果视频需要点击播放，记得加
playsinline和webkit-playsinline属性，否则 iOS 可能强制全屏
真正麻烦的不是写几行 CSS，而是父容器是否“参与定位流”、是否被其他 CSS（比如 overflow: hidden 或 transform）意外截断了定位上下文——这些细节一漏，右下角就变成“右上角”或者“飞到屏幕外”。
