“变形3d”不工作的位置：固定的孩子

Question

“变形3d”不工作的位置：固定的孩子我遇到的情况是，在正常的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>如何使翻译3d工作与固定位置的儿童？

Answer 1

这是因为transform创建一个新的本地坐标系，如W3C规范:

在HTML命名空间中，除none对于转换，结果是创建一个堆叠上下文和一个包含块。该对象充当固定定位后代的包含块。

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

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

埃里克·迈耶的文章也记载了这一点：用css变换不固定元素.

Answer 2

当页面中的项目正在使用Transform时，固定顶部导航上有一个闪烁，以下应用于我的顶部导航解决了跳转/闪烁问题：

#fixedTopNav {
    position: fixed;
    top: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);}

多亏了这个答案

Answer 3

就像Bradoergo建议的，把窗户打开scrollTop并将其添加到绝对位置顶部如下：

function fix_scroll() {
  var s = $(window).scrollTop();
  var fixedTitle = $('#fixedContainer');
  fixedTitle.css('position','absolute');
  fixedTitle.css('top',s + 'px');}fix_scroll();$(window).on('scroll',fix_scroll);

反正这对我有用。