轉化兒童包含奇怪的父母寬度

我有一個簡單的HTML標記：轉化兒童包含奇怪的父母寬度

<div class="parent"> 
    <div class="child"> 
    </div> 
</div>

子元素是通過transform: translate(-100%);移出視，但母公司寬度不與子元素移動：

這是我的簡化CSS：

.parent { 
    position: fixed; 
    top: 20%; 
    left: 0; 
} 

.parent .child { 
    height: 300px; 
    width: 500px; 
    background: orange; 
    transform: translate(-100%); 
    -webkit-transform: translate(-100%); 
    -moz-transform: translate(-100%); 
    -o-transform: translate(-100%); 
}

看一看：

來源

2016-05-13 susanloek

當轉換和元素的父母不受影響。這就是CSS轉換應該如何工作。從Using CSS transforms：

通過修改座標空間，CSS變換改變受影響內容的形狀和位置而不會干擾正常的文件流。

來源

2016-05-13 07:37:26 insertusernamehere

如果我使用'left：-100％;'而不是轉換，我有同樣的問題... – susanloek

@susanloek當你不應用轉換，你會看到容器是如何填充子元素（「滑出元素」），並具有最終計算寬度和高度「nxm px」。然後，使用變換將孩子移動到左側。如前所述「* CSS轉換可以改變受影響內容的形狀和位置，而不會中斷正常的文檔流*」。所以父容器保持它的計算大小，不管你如何轉換它的子項。 – insertusernamehere

轉化兒童包含奇怪的父母寬度

回答

相關問題