video元素默认定位行为未变，变化的是父容器布局方式；它始终是普通替换元素，表现取决于CSS上下文，现代常用Flexbox/Grid控制对齐与响应式，需注意其display:inline间隙、controls裁切、Safari重绘等问题。
video 元素默认定位行为没变，变的是父容器的布局方式
HTML5 的 <video></video> 本身没有“老版本固定位置”这回事——它一直是个普通替换元素，表现完全取决于 CSS 定位上下文。所谓“位置固定”，其实是旧项目里常用 position: absolute + 固定 top/left，或包裹在 float 容器中导致的视觉错觉。
真正变化的是现代布局能力增强：Flexbox 和 Grid 成为主流后，开发者更倾向用 display: flex 或 display: grid 控制 <video></video> 的对齐、伸缩和响应式行为，而不是硬编码像素偏移。
用 Flexbox 实现居中/自适应视频容器的典型写法
这是目前最稳妥、兼容性好（IE11+）且语义清晰的方式：
<div class="video-container">
<video controls>
<source src="demo.mp4" type="video/mp4">
</video>
</div>
.video-container 的关键样式：
立即学习“前端免费学习笔记（深入）”；
-
display: flex启用弹性布局 -
justify-content: center水平居中 -
align-items: center垂直居中 -
width和height设为具体值或100%，避免塌陷 - 可加
aspect-ratio: 16 / 9（现代浏览器）或用padding-top技巧保比例
Grid 布局下 video 的尺寸控制更精细
当需要与标题、字幕、按钮等组件网格化排布时，display: grid 更合适：
- 用
grid-template-areas明确区域命名，比如"video" "controls" -
grid-column/grid-row可让<video></video>跨行跨列，适配画中画或分屏场景 - 配合
minmax(0, 1fr)防止视频撑破容器（尤其 Safari 中<video></video>默认min-width: auto） - 注意：IE 不支持 Grid，如需兼容需降级到 Flexbox fallback
容易被忽略的 video 内建行为干扰布局
即使用了现代布局，<video></video> 自身几个特性仍会悄悄破坏预期效果：
- 默认有
display: inline，换行符会产生间隙 → 改成display: block或设父容器font-size: 0 - 无
src时部分浏览器渲染空白占位，但尺寸不可控 → 加width/height或用aspect-ratio锁定 -
controls属性开启后，控件高度不计入height计算 → 若设了固定高，可能被裁切；建议用aspect-ratio+max-height - 移动端 Safari 对
object-fit: cover在全屏退出后偶发重绘异常 → 加transform: translateZ(0)强制硬件加速可缓解
布局灵活性提升不等于可以不管 video 的原生表现，它的盒模型、内边距、默认宽高逻辑，仍然得手动干预才稳。
