固定定位與父元素轉換​​

Question

花了很多時間編碼一個網站，我的整個計劃似乎剛剛破滅。我發現我無法使用「固定」來定位任何元素 - 他們只是無法工作。經過一番研究，我認爲這是因爲元素的父元素包含多個變換，這意味着您無法獲得固定元素，因爲它現在不固定到視口，而是固定到父元素的變換。

我需要能夠使用固定位置，但是我的整個HTML代碼都在這個div內部進行轉換 - 我不能改變它，因爲它是設計的基本部分。

我不確定是否有任何解決此問題，或以某種方式解決問題可能與jQuery或什麼的。請幫助我！如果需要，我可以提供一些代碼。

謝謝！ http://wtfhtmlcss.com/#position-transforms

下面是一些CSS：

.container { 
    background: #fff; 
    min-height: 100%; 
    position: relative; 
    outline: 1px solid rgba(0,0,0,0); 
    z-index: 10; 
    -webkit-transform: translateZ(0) translateX(0) rotateY(0deg); reset transforms (Chrome bug) 
    transform: translateZ(0) translateX(0) rotateY(0deg); 
} 


.container::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 0px; 
    opacity: 0; 
    background: rgba(0,0,0,0.2); 
    /* the transition delay of the height needs to be synced with the container transition time */ 
    -webkit-transition: opacity 0.4s, height 0s 0.4s; 
    transition: opacity 0.4s, height 0s 0.4s; 
} 


.animate .container::after { 
    opacity: 1; 
    height: 101%; 
    -webkit-transition: opacity 0.3s; 
    transition: opacity 0.3s; 
} 

/* Effect Move Left */ 
.effect-moveleft { 
    background-color: rgb(50,50,130); 
} 

.effect-moveleft .container { 
    -webkit-transition: -webkit-transform 0.4s; 
    transition: transform 0.4s; 
    -webkit-transform-origin: 50% 50%; 
    transform-origin: 50% 50%; 
} 

.effect-moveleft .container::after { 
    background: rgba(255,255,255,0.6); 
} 

.effect-moveleft.animate .container { 
    -webkit-transform: translateX(-50%) rotateY(45deg) translateZ(-50px); 
    transform: translateX(-50%) rotateY(45deg) translateZ(-50px); 
} 

.no-csstransforms3d .effect-moveleft.animate .container { 
    left: -75%; 
} 

容器顯然包含整個機身碼。

然後是我已經設置爲固定位置，哪些不會修復的DIV。

Answer 1

的CSS Transforms Module Level 1說

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

然而，似乎有沒有共識：

問題1：是position: fixed需要這種效果呢？如果是這樣， 需要在這裏更詳細地瞭解爲什麼固定位置的對象 應該這樣做，即，否則實施起來要困難得多。 見Bug 16328。

所以你可以等待，也許規格會改變。

但是更好的方法是將您的固定元素移動到變形元素之外。