video元素默认不响应left/top定位，需设position: relative或absolute才能生效；用transform: translate()比top/left更高效且不受overflow影响。
video 元素默认不支持 left/top 定位，必须用 CSS 脱离文档流
HTML5 的 <video> 本身是替换元素（replaced element），像 <img> 一样，它在文档流中占据空间，但不会响应 left 或 top 这类定位属性——除非你先把它变成定位上下文中的“被定位元素”。最直接的做法是设 position: relative 或 position: absolute。
常见错误是直接写：video { left: 0; top: 0; }，但没加 position，结果完全无效。
- 想让视频固定在容器左上角：给
<video>加position: absolute; top: 0; left: 0;，同时确保其父容器有position: relative; - 只想微调位置（比如偏移 10px）：用
position: relative;+top: -10px; left: 5px; - 避免影响其他内容布局：优先选
absolute；若需保留原始占位，用relative
用 transform 平移比 top/left 更平滑，尤其做动画时
当你要做左上角对齐+缩放/旋转，或配合 JS 动态移动，transform: translate(-50%, -50%) 比 top/left 更可靠——它不触发重排（reflow），只触发重绘（repaint），性能更好，且不受父容器 overflow 隐藏影响。
例如把视频精确锚定到父容器中心再拉回左上角：
立即学习“前端免费学习笔记（深入）”；
video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 实际效果 = 左上角对齐 */
}- 注意：
transform的百分比是相对于自身宽高，不是父容器 - 如果父容器没设宽高，
absolute下的video可能收缩成 0×0，记得显式设width/height或用min-width - 旧版 Safari 对
transform支持弱，如需兼容 iOS top/left
video 标签内联属性 width/height 会和 CSS 冲突，优先用 CSS 控制尺寸
很多人写 <video width="640" height="360">，但一旦加了 position: absolute，这些内联尺寸容易被 CSS 的 width/height 覆盖，导致定位错乱——比如你设了 left: 0，但视频实际宽度只有 100px，看起来就“没贴住左上角”。
- 删掉 HTML 中的
width和height属性，全部交给 CSS 管理 - 设
video { width: 100%; height: auto; }保持比例，或用object-fit: cover;填满容器 - 若容器本身无明确尺寸（如 flex 项），需给父级加
min-width: 0; min-height: 0;防止 video 被压缩塌陷
移动端 viewport 缩放或横竖屏切换时，左上角可能偏移
iOS Safari 在横屏→竖屏切换瞬间，有时会临时忽略 position: absolute 的计算，导致视频“闪一下”跑到页面顶部而非容器左上。这不是 bug，而是渲染时机问题。
- 简单解法：监听
orientationchange或resize，触发一次video.style.transform += ' scale(1)'强制重绘 - 更稳做法：用
contain: layout paint;（Chrome/Firefox 支持好，Safari 15.4+）限制 video 渲染边界 - 别依赖
window.scrollTo(0, 0)去“修正”，它只滚页面，不影响绝对定位元素
左上角定位看着简单，真正卡住人的往往是父容器没设 position: relative、忘了删内联 width/height、或者在移动端 resize 后没重置 transform。这几个点漏一个，坐标就偏得莫名其妙。
