Блог

У меня есть страница с несколькими разделами. Все они были подобраны по размеру и расположены в соответствии с различными критериями.

 [div1]
[div2]
[div3]
 

Теперь поступил запрос на размещение видео (заданной ширины/высоты) за одним из дивов.

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

Как я могу это сделать, никоим образом не влияя на существующий макет?

Вот примерная отправная точка для того, что я пытаюсь сделать:

https://jsfiddle.net/gzdjL8kx/

Я хочу, чтобы синяя коробка (которая представляет видео) оставалась центрированной (по вертикали и горизонтали) за желтой коробкой, не влияя на расположение желтых/красных/оранжевых коробок вообще, и таким образом, чтобы расположение желтых/красных/оранжевых коробок можно было изменить, и положение синей коробки будет адаптироваться так, чтобы она оставалась центрированной за желтым. Синее поле также должно оставаться по центру, даже если его ширина/высота изменены.

Учитывая эту скрипку, вот мой желаемый результат, но я не знаю, как его достичь:

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

В принципе, я хочу, чтобы синяя коробка могла располагаться относительно желтой коробки, не влияя на другие коробки вообще. Все мои попытки центрировать его до сих пор заканчиваются тем, что в конечном итоге натыкаются и на другие коробки.

Если вы используете position:absolute; свое видео, вы удалите его из потока документов, что не позволит ему влиять на положение других относительно расположенных дивов.

Если вы хотите создать всплывающее окно в стиле лайтбокса для своего видео, вы можете центрировать его в окне просмотра, используя следующее:

 .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>