我遇到的情况是，在正常的 CSS 情况下，固定的 div 将准确定位在指定的位置（top:0px,left:0px）。
似乎这并不受人尊敬的如果我有父母,有一个translate3d变换。
我附上了JSFiddle举一个例子，我希望黄色框位于页面的顶angular而不是容器元素的内部。
您可以在下面找到小提琴的简化版本：
#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 规范：
在 HTML 命名空间中，除
none因为转换结果会创建堆叠上下文和包含块。
这意味着固定定位固定到变换后的元素，而不是视口。
据我所知，目前还没有解决方法。
Eric Meyer 的文章中也记录了这一点：使用 CSS 变换解除固定元素的固定。