固定定位与父元素转换​​

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。

所以你可以等待，也许规格会改变。

但是更好的方法是将您的固定元素移动到变形元素之外。