html - 'transform3d'不适用于位置:固定子级

我有一种情况，在正常的CSS情况下，固定的div会准确地定位在指定的位置（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与固定位置的孩子一起工作？

最佳答案

这是因为transform根据W3C spec创建了新的本地坐标系：


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


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

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

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

关于html - 'transform3d'不适用于位置:固定子级，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57413220/