html - 'transform3d' 不适用于位置 : fixed children

Question

我有这样一种情况，在正常的 CSS 环境中，一个固定的 div 会精确地定位在指定的位置(top:0px，left:0px)。

如果我有一个具有 translate3d 转换的父级，这似乎不被尊重。我没看到什么吗？我尝试过其他 webkit-transform 之类的 style 和 transform origin 选项，但没有成功。

我附上了 JSFiddle举个例子，我希望黄色框位于页面的右上角，而不是容器元素的内部。

您可以在下面找到 fiddle 的简化版本:

#outer {
    position:relative; 
    -webkit-transform:translate3d(0px, 20px , 0px); 
    height: 300px; 
    border: 1px solid #5511FF; 
    padding: 10px;
    background: rgba(100,180,250, .8); 
    width: 80%;
}
#middle{
    position:relative; 
    border: 1px dotted #445511; 
    height: 300px; 
    padding: 5px;
    background: rgba(250,10,255, .6);
}
#inner {
    position: fixed; 
    top: 0px;
    box-shadow: 3px 3px 3px #333; 
    height: 20px; 
    left: 0px;
    background: rgba(200,180,80, .8); 
    margin: 5px; 
    padding: 5px;
}

<div id="container">
    Blue: Outer, <br>
    Purple: Middle<br>
    Yellow: Inner<br>
    <div id="outer"> 
        <div id="middle">
            <div id="inner">
                Inner block
            </div>
        </div>
    </div>
</div>

我怎样才能使 translate3d 与固定位置的 child 一起工作？

Answer 1

这是因为 transform 根据 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.

这意味着固定定位会固定到转换后的元素，而不是视口(viewport)。

据我所知，目前没有解决方法。

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