'transform3d'不能与位置：固定的孩子
我有一个情况，在正常的CSS情况下，一个固定的div将被准确定位在指定的位置（ top:0px ， left:0px ）。
如果我有一个具有translate3d转换的父项，这似乎不被尊重。 我没有看到什么？ 我曾尝试其他的webkit转换像风格和转换原点选项，但没有运气。
我已经附上了一个JSFiddle的例子，我可以预料黄色框在页面的顶部，而不是在容器元素的内部。
http://jsfiddle.net/GMX5H/1/
这是小提琴的简化版本：
<br> <div style='position:relative; border: 1px solid #5511FF; -webkit-transform:translate3d(0px, 20px , 0px); height: 100px; width: 200px;'> <div style='position: fixed; top: 0px; box-shadow: 3px 3px 3px #333; height: 20px; left: 0px;'> Inner block </div> </div>
任何使translate3d与固定位置的孩子一起工作的指针将不胜感激。
这是因为根据W3C规范 ， transform会创建一个新的本地坐标系：
在HTML命名空间中，变换以外的任何值
none导致创建堆栈上下文和包含块。 该对象充当固定位置后代的包含块。
这意味着固定位置固定在变形的元素上，而不是固定在视口上。
目前还没有我知道的解决方法。
在Eric Meyer的文章中也有记录： 使用CSS变换解除固定元素 。
正如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);
无论如何这为我工作。
当页面中的项目正在使用transform时，我在固定的顶部导航栏上闪烁，以下应用于我的顶级导航栏解决了跳跃/闪烁问题：
#fixedTopNav { position: fixed; top: 0; transform: translateZ(0); -webkit-transform: translateZ(0); }
感谢这个答案
在Firefox和Safari中，你可以使用position: sticky; 而不是position: fixed; 但在其他浏览器中不起作用。 为此，你需要JavaScript。
所以，
没有找到一个令人满意的方法来处理这个问题; 并做了一些非画布的东西（需要翻译） – 我挖了一下，发现（至少对我来说）最好的方法来处理这个是应用相同的翻译，但打破儿童需要从他们的父母（翻译）元素中解决; 然后将该翻译应用于position: fixed内的div position: fixed wrapper。
结果看起来像这样（在你的情况）：
<br> <div style='position:relative; border: 1px solid #5511FF; -webkit-transform:translate3d(0px, 20px , 0px); height: 100px; width: 200px;'> </div> <div style='position: fixed; top: 0px; box-shadow: 3px 3px 3px #333; height: 20px; left: 0px;'> <div style='-webkit-transform:translate3d(0px, 20px, 0px);'> Inner block </div> </div>
小提琴叉子： https ： //jsfiddle.net/hju4nws1/
虽然这对于某些用例可能并不理想，但是通常如果您正在修复div，则可能不太在意它的父元素/元素在DOM中的继承树中的位置，似乎解决了大部分头痛问题- 虽然仍然允许translate和position: fixed住（相对）和谐。
我有类似的问题，我相信有工作。 我正在使用snap.js，我希望内容容器的一个子div被固定在它的位置上。 但是，当抽屉打开时，JavaScript会触发父容器的transform3d属性，这也会影响固定的子元素（固定元素与其父元素一起移动并保持固定在新位置）。
这就是说，固定的财产变得部分无用。 为了解决这个问题，可以添加一个事件监听器来启动一个单独的转换：translate3d用于固定的子div。 这个翻译的方向应该和父母的转换相反：translate3d。
唯一的问题是，我不知道该怎么写，如果有人刺伤了它，那就太酷了。
我遇到了同样的问题。 唯一的区别是，我的元素'position：fixed'具有从JS设置'顶部'和'左'样式属性。 所以我能够应用一个修复：
var oRect = oElement.getBoundingClientRect();
oRect对象将包含真实 （相对于视图端口）的顶部和左侧坐标。 所以你可以调整你的实际oElement.style.top和oElement.style.left属性。
我有一个使用-webkit-transform：translate3d的画布边栏。 这阻止了我在页面上放置一个固定的页脚。 我解决了这个问题，通过在侧边栏的初始化中添加到标签上的html页面上定位一个类，然后编写一个css：not qualifier来声明“-webkit-transform：none;” 当这个类不存在于html标签中的时候，这个标签就是html标签。 希望这可以帮助那些在这个相同的问题！
尝试将相反的转换应用于子元素：
<div style='position:relative; border: 1px solid #5511FF; -webkit-transform:translate3d(0px, 20px , 0px); height: 100px; width: 200px;'> <div style='position: fixed; top: 0px; -webkit-transform:translate3d(-100%, 0px , 0px); box-shadow: 3px 3px 3px #333; height: 20px; left: 0px;'> Inner block </div> </div>
解决这个问题的一个方法是对固定元素应用相同的变换：
<br> <div style='position:relative; border: 1px solid #5511FF; -webkit-transform:translate3d(0px, 20px , 0px); height: 100px; width: 200px;'> <div style='position: fixed; top: 0px; -webkit-transform:translate3d(0px, 20px , 0px); box-shadow: 3px 3px 3px #333; height: 20px; left: 0px;'> Inner block </div> </div>
如果你正在使用offcanvas菜单的移动工作，也许这个代码将帮助你。
$('#toggle-button').click(function () { slideout.toggle(); // Sticky menu with off canvas menu (for mobile) var isMenuDisplaced = $('.sticky-menu').hasClass('is-displaced'); if (isMenuDisplaced === false) { $('.sticky-menu').addClass('is-displaced'); var scrollTopPosition = $(window).scrollTop(); $('.sticky-menu').css('position', 'absolute'); $('.sticky-menu').css('top', scrollTopPosition + 'px'); } else { window.setTimeout(function () { $('.sticky-menu').removeClass('is-displaced'); $('.sticky-menu').css('position', 'fixed'); $('.sticky-menu').css('top', 0); }, 400); } })
