爲什麼向固定父項添加變換會更改子寬度？

我有一個固定的父div的固定子div。當我將子寬度設置爲100％時，將其設置爲窗口的100％寬度或如果添加變換，則爲父寬度的100％：轉換爲父級div。爲什麼向固定父項添加變換會更改子寬度？

父DIV + CSS：

#outer { 
    position: fixed; 
    top: 0; 
    left: 50%; 
    // transform: translate(-50%, 0); 

    width: 400px; 
    height: 200px; 
    z-index: 5000; 
    background-color: red; 
}

孩子的div：

#inner { 
    position: fixed; 
    width: 100%; 
    left: 30%; 
    top: 20%; 
    background-color: green; 
}

現在#inner是屏幕的寬度爲100％。取消註釋轉換線使其成爲父項的100％。這是怎麼回事？

UPDATE：

好吧，我沒有注意到，在第一，但實際上它不僅寬度的改變，位置變得相對太。
對於任何人誰奇蹟，這也工作。如果您添加一個具有固定位置的#inner-inner div，它將自己定位rel。至#outer，除非您也將轉換添加到#inner。這是#inner，那麼這就成爲固定兒童的上下文。我想起這非常有趣的文章：https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

來源

2016-05-30 konrad

似乎'變換'制定了一個獨立的堆棧上下文/環境，其中#inner「修復」絕對相對於轉換後的父級。有趣。 –

過去，我認爲CSS工作組決定，固定元素還應該爲固定後代建立一個包含塊。但他們似乎改變了主意。 – Oriol

從CSS 2.1 - Definition of "containing block"和CSS Position 3 - Definition of containing block，

如果元素position: fixed，含塊由viewport在連續介質或的情況下成立分頁媒體中的頁面區域。

但是，當您將變換添加到某個祖先時會發生變化。從CSS Transforms 1 - The Transform Rendering Model，

對於其佈局由CSS盒模型支配元素，比none其用於製作兩者堆疊上下文和包含塊的變換結果以外的任何值。該對象充當包含固定位置後代的塊的。

來源

2016-05-30 23:46:05 Oriol

爲什麼向固定父項添加變換會更改子寬度？

回答

相關問題