css – ‘transform3d’不能使用position:fixed children

我有一种情况,在正常的CSS情况下,一个固定的div将被精确定位在它指定的位置(top:0px,left:0px)。

如果我有一个具有translate3d变换的父类,这似乎不被尊重。我没有看到什么?我试过其他webkit变换像样式和转换原始选项,但没有运气。

我附上一个JSFiddle有一个例子,我会期望黄色框在页面的顶部角落,而不是在容器元素内。

http://jsfiddle.net/GMX5H/1/

这是一个简单的小提琴:

<br>
<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>

任何使translate3d工作与固定位置的孩子的指针将受到赞赏。

这是因为变换创建了一个新的局部坐标系,如W3C spec

In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

这意味着固定定位变得固定到变换的元素,而不是视口。

目前还没有一个解决办法,我知道。

它也记录在Eric Meyer的文章:Un-fixing Fixed Elements with CSS Transforms

http://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:css – ‘transform3d’不能使用position:fixed children