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

Posted 2023-03-29

【中文标题】CSS：在 div 后面居中视频而不影响整体 div 布局？

【英文标题】：CSS: center video behind div without affecting overall div layout?

【发布时间】：2021-11-11 03:39:48

【问题描述】：

我有一个包含多个 div 的页面。它们都根据各种标准进行了尺寸和定位。

[div1]
[div2]
[div3]

现在有人请求在其中一个 div 后面放置一个视频（具有设定的宽度/高度）。

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

如何在不以任何方式影响现有布局的情况下做到这一点？

这是我想要做的事情的起点：

https://jsfiddle.net/gzdjL8kx/

我希望蓝色框（代表视频）保持居中（垂直和水平）在黄色框后面，完全不影响黄色/红色/橙色框的布局，并且布局黄色/红色/橙色框的数量可以更改，蓝色框的位置将适应，使其保持在黄色后面的中心。即使更改了宽度/高度，蓝色框也应保持居中。

鉴于那个小提琴，这是我想要的结果，但我不知道如何实现它：

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

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

【参考方案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>

【讨论】：

谢谢，但我需要将视频 div 置于黄色的中心。这不是我想要实现的灯箱式弹出窗口。有没有办法将 position:absolute 与对另一个 div 的中心位置的引用结合起来？

是的，我刚刚更新了 sn-p。在黄色 div 中使用position:relative，然后将蓝色 div 放入其中。如果你将一个绝对定位的元素放在带有position:relative 的div 中，它的定位将相对于它的父元素。

啊，谢谢！这似乎是我正在寻找的答案。感谢您的快速编辑。