我有一個帶有多個div的頁面。它們的大小和位置都是根據不同的標準來確定的。
[div1] 。
[div2]
[div3]
現在有人要求在其中一個div后面放置一個視頻（設定的寬度/高度）
。[div1]。
[div2 - 現在有背景視頻]
[div3]。
我怎樣才能在不影響現有布局的情況下做到這一點呢？
下面是我想做的事情的起點：
https://jsfiddle.net/gzdjL8kx/
我希望藍色方框（代表視頻）在黃色方框后面保持居中（垂直和水平），而完全不影響黃色/紅色/橙色方框的布局，并且以這樣一種方式，即黃色/紅色/橙色方框的布局可以改變，而藍色方框的位置將適應，從而保持在黃色方框后面居中。即使藍色方框的寬度/高度發生變化，它也應保持居中。
https://i.imgur.com/k0S8WNF.png
基本上，我希望藍色方框能夠相對于黃色方框進行定位，而完全不影響其他方框。到目前為止，我所有試圖將其置于中心位置的嘗試最終都會使其他方框也受到影響。
uj5u.com熱心網友回復：
如果你在你的視頻上使用position:absolute;，你將把它從檔案流中移除，這將阻止它影響其他相對定位的 div 的位置。
.yellow.
{
width: 250px;
height:150px;
margin:自動。
background-color:黃色。
position:相對。
}
.orange[/span].
{
width:500px;
height:100px;
margin:自動。
background-color:橙色。
}
.red[/span
{
width:100%;
height:150px;
background-color:紅色。
}
.blue; background-color:red; background-color: red
{
width:320px;
height:240px;
background-color:藍色。
position: absolute;
top:50%。
left:50%。
transform:translate（-50%, -50%）。
}<div class="orange" >/span>
</div>/span>
<div class="yellow">
<div class="藍色"> </div>>
</div>/span>
<div class="red">
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/306703.html
標籤：