CSS：在 div 后面居中视频而不影响整体 div 布局？

Question

我有一个包含多个 div 的页面。它们都根据各种标准调整了大小和位置。

[div1]
[div2]
[div3]

现在有人请求将视频（一组 width/height）放在其中一个 div 后面。

[div1]
[div2 - now with background video]
[div3]

如何在不影响现有布局的情况下执行此操作？

这是一个 fiddle 我正在尝试做的事情的起点：

https://jsfiddle.net/gzdjL8kx/

我希望蓝色框（代表视频）在黄色框后面保持居中（垂直和水平），完全不影响 yellow/red/orange 框的布局，并且这样yellow/red/orange 框的布局可以更改，蓝色框的位置将调整，以便它保持在黄色后面的中心。蓝色框也应保持居中，即使其 width/height 已更改。

鉴于 fiddle，这是我想要的结果，但我不知道如何实现它：

https://i.imgur.com/k0S8WNF.png

基本上我希望蓝色框能够相对于黄色框定位而不影响其他框。到目前为止，我所有将其居中的尝试最终都将其他盒子也撞到了。

Answer 1

如果您在视频中使用 position:absolute;，您会将其从文档流中删除，从而阻止它影响其他相对定位的 div 的位置。

如果您的目标是为您的视频制作灯箱样式的弹出窗口，您可以使用以下方法将其置于视口中心：

.yellow
{
  width:250px;
  height:150px;
  margin:auto;
  background-color:yellow;
  position:relative;
}
.orange
{
  width:500px;
  height:100px;
  margin:auto;
  background-color:orange;
}
.red
{
  width:100%;
  height:150px;
  background-color:red;
}
.blue
{
  width:320px;
  height:240px;
  background-color:blue;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

<div class="orange">
</div>

<div class="yellow">
  <div class="blue"></div>
</div>

<div class="red">
</div>

CSS：在 div 后面居中视频而不影响整体 div 布局？

CSS: center video behind div without affecting overall div layout?

html

css

center