'transform3d'不适用于位置：固定子级

Question

我在哪里，在正常情况下，CSS，固定股利将正好它被指定的（定位的情况下top:0px，left:0px）。

如果我的父母有一个translate3d转换，这似乎不被尊重。我没看到什么吗？我尝试了其他webkit转换，例如样式和转换原点选项，但是没有运气。

我在JSFiddle上附加了一个示例，其中我希望黄色框位于页面的顶部，而不是容器元素的内部。

您可以在下面找到小提琴的简化版本：

#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与固定位置的子级一起工作？

Answer 1

这是因为transform按[W3C规范，会创建一个新的本地坐标系：

在HTML命名空间中，除了none转换值以外的任何值都将导致创建堆栈上下文和包含块。该对象充当固定位置后代的包含块。

这意味着固定的位置将固定到变形的元素，而不是视口。

我目前不知道有解决方法。