Html “transform3d”不适用于位置：固定子项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15194313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
'transform3d' not working with position: fixed children
提问by Juan Carlos Moreno
I have a situation where, in normal CSS circumstances, a fixed div would be positioned exactly where it is specified (top:0px, left:0px).
我有一种情况，在正常的 CSS 情况下，固定的 div 将准确定位在指定的位置 ( top:0px, left:0px)。
This does not seem to be respected if I have a parent that has a translate3d transform. Am I not seeing something? I have tried other webkit-transform like style and transform origin options but had no luck.
如果我有一个具有 translate3d 转换的父级，这似乎不受尊重。我没有看到什么吗？我尝试过其他 webkit-transform，如 style 和 transform origin 选项，但没有运气。
I have attached a JSFiddlewith an example where I would have expected the yellow box be at the top corner of the page rather than inside of the container element.
我附上了一个JSFiddle和一个例子，我希望黄色框位于页面的顶角而不是容器元素的内部。
You can find below a simplified version of the fiddle:
您可以在下面找到小提琴的简化版本：
#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>How can I make translate3d work with fixed-positioned children?
我怎样才能让 translate3d 与固定位置的孩子一起工作？
回答by saml
This is because the transformcreates a new local coordinate system, as per W3C spec:
这是因为transform根据W3C 规范创建了一个新的本地坐标系：
In the HTML namespace, any value other than
nonefor the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
在 HTML 命名空间中，除了
none用于转换的任何值都会导致创建堆栈上下文和包含块。该对象充当固定定位后代的包含块。
This means that fixed positioning becomes fixed to the transformed element, rather than the viewport.
这意味着固定定位将固定到变换的元素，而不是视口。
There's not currently a work-around that I'm aware of.
目前没有我知道的解决方法。
It is also documented on Eric Meyer's article: Un-fixing Fixed Elements with CSS Transforms.
它也记录在 Eric Meyer 的文章：Un-fixing Fixed Elements with CSS Transforms 中。
回答by rob.m
I had a flickering on my fixed top nav when items in the page were using transform, the following applied to my top nav resolved the jumping/flickering issue:
当页面中的项目使用转换时，我的固定顶部导航上有闪烁，以下应用于我的顶部导航解决了跳跃/闪烁问题：
#fixedTopNav {
position: fixed;
top: 0;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
回答by UzumakiDev
As Bradoergo suggested, just get the window scrollTopand add it to the absolute position top like:
正如 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);
This worked for me anyway.
无论如何，这对我有用。
回答by Du?an
In Firefox and Safari you can use position: sticky;instead of position: fixed;but it will not work in other browsers. For that you need javascript.
在 Firefox 和 Safari 中，您可以使用position: sticky;代替，position: fixed;但在其他浏览器中将无法使用。为此，您需要 javascript。
回答by reid
In my opinion, the best method to deal with this is to apply the same translate, but break children that need to be fixed out of their parent (translated) element; and then apply the translate to a div inside the position: fixedwrapper.
在我看来，解决这个问题的最好方法是应用相同的翻译，但将需要修复的子元素从其父（翻译）元素中分离出来；然后将翻译应用于position: fixed包装器内的 div 。
The results look something like this (in your case):
结果看起来像这样（在你的情况下）：
<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>
JSFiddle: https://jsfiddle.net/hju4nws1/
JSFiddle：https://jsfiddle.net/hju4nws1/
While this may not be ideal for some use cases, typically if you're fixing a div you probably could care less about what element is its parent/where it falls in the inheritance tree in your DOM, and seems to solve most of the headache - while still allowing both translateand position: fixedto live in (relative) harmony.
虽然这对于某些用例来说可能并不理想，但通常如果您正在修复 div，您可能不太关心它的父元素是什么元素/它在 DOM 中的继承树中的位置，并且似乎解决了大部分令人头疼的问题- 同时仍然允许两者translate和position: fixed（相对）和谐相处。
回答by mr.G
Add a dynamic class while the element transforms.$('#elementId').addClass('transformed').
Then go on to declare in css,
在元素转换时添加动态类。$('#elementId').addClass('transformed'). 然后继续在css中声明，
.translat3d(@x, @y, @z) {
-webkit-transform: translate3d(@X, @y, @z);
transform: translate3d(@x, @y, @z);
//All other subsidaries as -moz-transform, -o-transform and -ms-transform
}
then
然后
#elementId {
-webkit-transform: none;
transform: none;
}
then
然后
.transformed {
#elementId {
.translate3d(0px, 20px, 0px);
}
}
Now position: fixedwhen provided with a topand z-indexproperty values on a child element just work fine and stay fixed until the parent element transforms. When the transformation is reverted the child element pops as fixed again. This should easen the situation if you are actually using a navigation sidebar that toggles open and closes upon a click, and you have a tab-set which should stay sticky as you scroll down the page.
现在，position: fixed当在子元素上提供 atop和z-index属性值时，它可以正常工作并保持固定，直到父元素转换。当转换恢复时，子元素再次弹出为固定。如果您实际上使用的是在单击时切换打开和关闭的导航侧边栏，并且您有一个选项卡集，它应该在您向下滚动页面时保持粘性，这应该可以缓解这种情况。
回答by WeisbergWeb
I have an off canvas sidebar that uses -webkit-transform: translate3d. This was preventing me from placing a fixed footer on the page. I resolved the issue by targeting a class on the html page that is added to the tag on initialization of the sidebar and then writing a css :not qualifier to state "-webkit-transform: none;" to the html tag when that class is not present on the html tag. Hope this helps someone out there with this same issue!
我有一个使用 -webkit-transform: translate3d 的画布边栏。这阻止了我在页面上放置固定页脚。我通过定位 html 页面上的一个类来解决这个问题，该类在侧边栏初始化时添加到标签中，然后编写一个 css :not 限定符来声明“-webkit-transform: none;” 当该类不存在于 html 标签上时，到 html 标签。希望这可以帮助有同样问题的人！
回答by Mari Do
Try to apply opposite transform to the child element:
尝试对子元素应用相反的变换：
<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>
回答by Mike Dobrin
I ran across the same problem. The only difference is that my element with 'position: fixed' had its 'top' and 'left' style properties set from JS. So I was able to apply a fix:
我遇到了同样的问题。唯一的区别是我的带有 'position: fixed' 的元素从 JS 设置了它的 'top' 和 'left' 样式属性。所以我能够应用修复：
var oRect = oElement.getBoundingClientRect();
oRect object will contain real(relative to view port) top and left coordinates. So you can adjust your actual oElement.style.top and oElement.style.left properties.
oRect 对象将包含真实的（相对于视口）顶部和左侧坐标。所以你可以调整你的实际 oElement.style.top 和 oElement.style.left 属性。
回答by fgassert
One way to deal with this is to apply the same transform to the fixed element:
解决这个问题的一种方法是对固定元素应用相同的变换：
<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>
