CSS如何将video居中置于div底层且不影响原有页面布局

你只需要做3处调整，完全不修改原有布局的已有样式即可实现需求：

1. HTML结构调整：将video元素插入到div2（黄色方块）的内部，作为第一个子元素即可，其他DOM结构完全不动。
2. 给div2添加1行CSS：原有样式完全保留，仅新增position: relative;属性，作用是将div2设置为内部绝对定位元素的参照容器，不会改变div2本身的尺寸、位置，也不会影响相邻的div1、div3布局。
3. 给video设置定位样式：添加以下CSS规则，原有video的宽高样式保留即可：

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 0;

原理解释 #

• position: absolute会让video完全脱离正常文档流，不会在页面中占据任何实际空间，因此完全不会影响div2自身的尺寸、也不会挤压其他元素的位置，完全不会改动原有布局。
• left: 50%和top: 50%会将video的左上角定位到div2的中心位置，再配合transform: translate(-50%, -50%)将video自身往左上偏移自身宽高的一半，最终实现完全居中，无论后续video宽高如何调整，都能自动适配居中。
• z-index: 0保证video处于div2内部所有内容的最底层，作为背景展示，不会遮挡div2原有内容。

即使后续你修改div1、div2、div3的布局规则，只要div2保留position: relative属性，video的位置就会一直跟随div2自适应居中，不会对其他元素产生任何影响。

内容的提问来源于stack exchange，提问作者Tyson