blocks|key|1062549|text|CSS+Transforms+spec解释了这种行为。具有变换的元素充当固定位置后代的包含块，因此具有变换的对象下的位置:固定不再具有固定行为。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1062550|当应用于相同的元素时，它们确实起作用；元素将被定位为固定的，然后进行转换。|1062551|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css-transforms-1/^0|0|J|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

The <a href="http://www.w3.org/TR/css-transforms-1/" rel="noreferrer">CSS Transforms spec</a> explains this behavior. Elements with transforms act as a containing block for fixed position descendants, so position:fixed under something with a transform no longer has fixed behavior.

They do work when applied to the same element; the element will be positioned as fixed, and then transformed.

blocks|key|1062245|text|对我有效的一些(有点老生常谈的)东西是position:sticky：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1062246|.fixed+{
+++++position:+sticky;
}|code-block|syntax|javascript|1062247|entityMap^0|J|F|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Something (a bit hacky) that worked for me is to <code>position:sticky</code> instead:

<pre><code>.fixed {
 position: sticky;
}
</code></pre>

blocks|key|1062307|text|对于任何发现他们的背景图像在Chrome中消失的人来说，因为背景-附件:修复了相同的问题；-这是我的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1062308|//+run+js+if+Chrome+is+being+used
if(navigator.userAgent.toLowerCase().indexOf('chrome')+>+-1)+{
++++//+set+background-attachment+back+to+the+default+of+'scroll'
++++$('.imagebg').css('background-attachment',+'scroll');

++++//+move+the+background-position+according+to+the+div's+y+position
++++$(window).scroll(function(){

++++++++scrollTop+=+$(window).scrollTop();
++++++++photoTop+=+$('.imagebg').offset().top;
++++++++distance+=+(photoTop+-+scrollTop);
++++++++$('.imagebg').css('background-position',+'center+'+%2B+(distance*-1)+%2B+'px');

++++});
}++|code-block|syntax|javascript|1062309|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For anyone who finds their background images are disappearing in Chrome because of the same issue with background-attachment: fixed; - this was my solution:

<pre><code>// run js if Chrome is being used
if(navigator.userAgent.toLowerCase().indexOf('chrome') &gt; -1) {
 // set background-attachment back to the default of 'scroll'
 $('.imagebg').css('background-attachment', 'scroll');

 // move the background-position according to the div's y position
 $(window).scroll(function(){

 scrollTop = $(window).scrollTop();
 photoTop = $('.imagebg').offset().top;
 distance = (photoTop - scrollTop);
 $('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');

 });
} 
</code></pre>

blocks|key|1062584|text|2016年8月和固定位置&动画/变换仍然是一个问题。对我来说唯一有效的解决方案是为子元素创建一个动画，这需要更长的时间。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1062585|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

August 2016 and fixed position &amp; animation / transform is still a problem. The only solution that worked for me – was to create an animation for the child element that takes longer time.

blocks|key|1277057|text|实际上，我找到了另一种方法来修复这个"bug"：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1277058|我有容器元素，其中包含css3动画页面。当页面完成动画制作时，css3属性的值为:+transform:+translate(0,0)；。因此，我只删除了这一行，一切都正常工作-+position:+fixed正确显示。当应用css类来翻译页面时，将添加translate属性并使用css3动画。|1277059|示例：|1277060|.page+{
+++++top:+50px;
+++++position:+absolute;
+++++transition:+ease+0.6s+all;
+++++/*+-webkit-transform:+translate(0,+0);+*/
+++++/*+transform:+translate(0,0);+*/
+}
+.page.hide+{
+++++-webkit-transform:+translate(100%25,+0);
+++++transform:+translate(-100%25,+0);++++
+}|code-block|syntax|javascript|1277061|演示：http://jsfiddle.net/ZWcD9/|offset|length|1277062|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ZWcD9/^0|0|0|0|0|3|Q|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Actually I found another way to fix this "bug":

I have container element which hold page with css3 animations. When the page completed the animation, the css3 property has value: transform: translate(0,0);. So, I just removed this line, and everything worked as it should - position: fixed is displayed properly. When css class is applied to translate the page, translate property is added and css3 animation worked as well.

Example:

<pre><code>.page {
 top: 50px;
 position: absolute;
 transition: ease 0.6s all;
 /* -webkit-transform: translate(0, 0); */
 /* transform: translate(0,0); */
 }
 .page.hide {
 -webkit-transform: translate(100%, 0);
 transform: translate(-100%, 0); 
 }
</code></pre>

Demo:
<a href="http://jsfiddle.net/ZWcD9/" rel="nofollow">http://jsfiddle.net/ZWcD9/</a>

blocks|key|1277693|text|我在尝试使用react-swipeable-views+(rsw)实现react-color时遇到了这个问题。对我来说，问题是rsw将translate(-100%25,+0)应用于选项卡面板，这打破了在全屏上添加的默认固定位置div，当单击它时，会关闭颜色选择器模型。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1277694|对我来说，解决方案是将相反的转换应用于固定元素(在本例中为translate(100%25,+0)，它修复了我的问题。我不确定这在其他情况下是否有用，但我想无论如何我都会分享。|1277695|下面是一个示例，展示了我上面描述的内容：|1277696|https://codepen.io/relativemc/pen/VwweEez|1277697|entityMap|0|LINK|mutability|MUTABLE|url^0|1V|J|0|T|I|0|0|0|15|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Y|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|L|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|K]]]]

I had this issue whilst trying to implement react-color with react-swipeable-views (rsw). The problem for me was that rsw applies <code>translate(-100%, 0)</code> to a tab panel which breaks the default fixed position div added over the full screen which when clicked closes the color picker model.

For me the solution was to apply the opposite transform to the fixed element (in this case <code>translate(100%, 0)</code> which fixed my issue. I'm not sure if this is useful in other cases but thought I would share anyway.

Here is an example showing what I've described above:

<a href="https://codepen.io/relativemc/pen/VwweEez" rel="nofollow noreferrer">https://codepen.io/relativemc/pen/VwweEez</a>

blocks|key|1276890|text|在我的phonegap项目中，webkit+transform+-webkit-transform:+translateZ(0)；工作得非常出色。它已经可以在chrome和safari上运行了，但不能在移动浏览器上运行。此外，还有一个问题是包装器DIVs在某些情况下没有完成。我们在浮动DIVs的情况下应用clear类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1276891|<div+class="Clear"></div>+.Clear,+.Clearfix{clear:both;}|code-block|syntax|javascript|1276892|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

on my phonegap project the webkit transform -webkit-transform: translateZ(0); worked like a charm.
It was already working in chrome and safari just not the mobile browser.
also there can be one more issue is WRAPPER DIVs are not completed in some cases. we apply clear class in case of floating DIVs.

<pre><code>&lt;div class="Clear"&gt;&lt;/div&gt; .Clear, .Clearfix{clear:both;}
</code></pre>

blocks|key|1277101|text|可能是因为Chrome中的一个错误，因为我不能在Safari和Firefox中复制，但这在Chrome40.0.2214.111+http://jsbin.com/hacame/1/edit?html,css,output中可以工作|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1277102|这是一个非常特殊的结构，所以它绝不是一个通用的单行css补丁，但也许有人可以对它进行修补，使其在Safari和Firefox中工作。|1277103|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/hacame/1/edit?html,css,output^0|1T|1A|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Probably due to a bug in Chrome as I can't replicate in Safari nor Firefox, but this works in Chrome 40.0.2214.111 <a href="http://jsbin.com/hacame/1/edit?html,css,output" rel="nofollow">http://jsbin.com/hacame/1/edit?html,css,output</a>

It's a very particular structure so it's by no means a universally applicable one-lined css fix, but perhaps someone can tinker with it to get it working in Safari and Firefox.

blocks|key|1062129|text|将-webkit-transform添加到固定元素为我解决了这个问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1062130|.fixed_element+{
+++-webkit-transform:+translateZ(0);
+++position:+fixed;
+++....
}+|code-block|syntax|javascript|1062131|entityMap^0|1|H|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Adding the <code>-webkit-transform</code> to the fixed element solved the issue for me.

<pre><code>.fixed_element {
 -webkit-transform: translateZ(0);
 position: fixed;
 ....
} 
</code></pre>

blocks|key|1277182|text|以下是在所有经过测试的浏览器和移动设备(Chrome、IE、Firefox、Safari、iPad、iPhone5和6、安卓)上适用的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1277183|img.ui-li-thumb+{
++++position:+absolute;
++++left:+1px;
++++top:+50%25;

++++-ms-transform:+translateY(-50%25);
++++-webkit-transform:+translateY(-50%25);
++++-moz-transform:+translateY(-50%25);
++++-o-transform:+translateY(-50%25);
++++transform:+translateY(-50%25);
}|code-block|syntax|javascript|1277184|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is what works for me on all tested browsers and mobile devices (Chrome, IE, Firefox, Safari, iPad, iphone 5 and 6, Android).

<pre><code>img.ui-li-thumb {
 position: absolute;
 left: 1px;
 top: 50%;

 -ms-transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);
}
</code></pre>

blocks|key|1277410|text|如果您可以使用javascript作为选项，这可以作为一种变通方法，用于定位与窗口相关的位置固定的元素，当它位于转换后的元素中时：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1277411|++let+fixedEl+//+some+node+that+you+is+position+
++++++++++++++//+fixed+inside+of+an+element+that+has+a+transform

++const+rect+=+fixedEl.getBoundingClientRect()
++const+distanceFromWindowTop+=+rect.top
++const+distanceFromWindwoLeft+=+rect.left
++let+top+=+fixedEl.offsetTop
++let+left+=+fixedEl.offsetLeft

++if(distanceFromWindowTop+!==+relativeTop)+{
++++top+=+-distanceFromWindowTop
++++fixedEl.style.top+=+`${top}px`
++}

++if(distanceFromWindowLeft+!==+relativeLeft)+{
++++left+=+-distanceFromWindowLeft
++++fixedEl.style.left+=+`${left}px`
++}|code-block|syntax|javascript|1277412|当然，你还必须调整你的高度和宽度，因为fixedEl将根据它的容器来计算它。这取决于你的用例，但这将允许你以可预测的方式将某个东西的位置设置为固定的，而不管它的容器是什么。|offset|length|style|CODE|1277413|entityMap^0|0|0|J|7|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

If you can use javascript as an option this can be a workaround for positioning a position fixed element relavtive to the window when it's inside a transformed element:

<pre><code> let fixedEl // some node that you is position 
 // fixed inside of an element that has a transform

 const rect = fixedEl.getBoundingClientRect()
 const distanceFromWindowTop = rect.top
 const distanceFromWindwoLeft = rect.left
 let top = fixedEl.offsetTop
 let left = fixedEl.offsetLeft

 if(distanceFromWindowTop !== relativeTop) {
 top = -distanceFromWindowTop
 fixedEl.style.top = `${top}px`
 }

 if(distanceFromWindowLeft !== relativeLeft) {
 left = -distanceFromWindowLeft
 fixedEl.style.left = `${left}px`
 }
</code></pre>

Granted you will also have to adjust your heights and width because <code>fixedEl</code> will be calculating it's with based on it's container. That depends on your use case but this will allow you to predictably set the something position fixed, regardless of it's container.

blocks|key|1062743|text|在元素转换.$('#elementId').addClass('transformed')时添加一个动态类。然后继续在css中声明，|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1062744|.translatX(@x)+{+
+++++-webkit-transform:+translateX(@X);+
+++++++++++++transform:+translateX(@x);
++++++//All+other+subsidaries+as+-moz-transform,+-o-transform+and+-ms-transform+
}|code-block|syntax|javascript|1062745|然后|1062746|#elementId+{+
++++++-webkit-transform:+none;+
++++++++++++++transform:+none;
}|1062747|1062748|.transformed+{
++++#elementId+{+
++++++++.translateX(@neededValue);
++++}
}|1062749|Now+position:+fixed当在子元素上提供top和z-index属性值时，可以很好地工作并保持固定，直到父元素转换。当转换被恢复时，子元素再次弹出为固定的。如果你实际使用的导航侧边栏可以在点击时切换打开和关闭，并且你有一个标签集，当你向下滚动页面时，它应该会保持粘滞，这应该会减轻这种情况。|1062750|entityMap^0|6|13|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|O|3|L|5|6|7|11|8|@]|D|@]|E|$]]|$1|P|3|Q|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|R|3|S|5|6|7|13|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|U|$]]

Add a dynamic class while the element transforms.<code>$('#elementId').addClass('transformed')</code>. 
Then go on to declare in css,

<pre><code>.translatX(@x) { 
 -webkit-transform: translateX(@X); 
 transform: translateX(@x);
 //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}
</code></pre>

then

<pre><code>#elementId { 
 -webkit-transform: none; 
 transform: none;
}
</code></pre>

then

<pre><code>.transformed {
 #elementId { 
 .translateX(@neededValue);
 }
}
</code></pre>

Now position: fixed when provided with a top and z-index property 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.

blocks|key|1277760|text|在我的例子中，我发现我们不能在transform:+translateY(+)之前使用transform:+translateX()，我们想同时使用这两种方法，我们应该使用transform：.if(，)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1277761|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

in my case I found out we can't use transform: translateX() before transform:translateY().if we want to use both we should use transform:translate( , ).

blocks|key|1277794|text|如果要以动画形式返回到所有平移均为0的原始位置，则可以使用设置了transform:+unset;的解决方案|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1277795|++100%25+{
++++opacity:+1;
++++visibility:+visible;
++++/*+Use+unset+to+allow+fixed+elements+instead+of+translate3d(0,+0,+0)+*/
++++transform:+unset;
++}|code-block|syntax|javascript|1277796|entityMap^0|H|1|W|H|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

If you're animating back to the original position where all translates are <code>0</code>, you can use this solution where you set <code>transform: unset;</code>:
<pre><code> 100% {
 opacity: 1;
 visibility: visible;
 /* Use unset to allow fixed elements instead of translate3d(0, 0, 0) */
 transform: unset;
 }
</code></pre>

blocks|key|1062623|text|请不要投票，因为这不是确切的答案，但可以帮助某人，因为这是关闭转换的快速方法。如果您真的不需要父对象上的转换，并且希望您的固定位置再次工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1062624|#element_with_transform+{
++-webkit-transform:+none;
++transform:+none;
}|code-block|syntax|javascript|1062625|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Please don't up vote, because this is not exact answer, but could help someone because it's fast way just to turn off the transformation. 
If you really don't need the transformation on the parent and you want your fixed position working again:

<pre><code>#element_with_transform {
 -webkit-transform: none;
 transform: none;
}
</code></pre>

I am using -webkit-transform (and -moz-transform / -o-transform) to rotate a div. Also have position fixed added so the div scrols down with the user.

In Firefox it works fine, but in webkit based browsers it's broken. After using the -webkit-transform, the position fixed doesn't work anymore! How is that possible?

Positions fixed doesn't work when using -webkit-transform

容器

我使用-webkit-transform (和-moz-transform / -o-transform)来旋转div。还添加了固定位置，以便div随用户向下滚动。在Firefox中，它工作得很好，但在基于webkit的浏览器中，它就坏了。在使用-webkit-transform之后，固定的位置不再起作用！那件事怎么可能？

问使用-webkit-transform时，固定位置不起作用
EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用-webkit-transform时，固定位置不起作用EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用-webkit-transform时，固定位置不起作用
EN