Html 固定位置在 Chrome 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8929288/
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
Fixed position doesn't work on Chrome
提问by Saiful Islam
Right column fixed position works on Opera & Firefox but not on Chrome, any solution?
右栏固定位置适用于 Opera 和 Firefox，但不适用于 Chrome，有什么解决方案吗？
#rightcolumn {
margin: 0px 0px 0px 0px;
float: right;
font-family: Arial;
font-weight: bold;
height: auto;
width: 300px;
display: inline;
position: fixed;
}
回答by Sparky
1) Firstly, remove display: inlinebecause, if you want the block-level element to be position: fixed, you cannot also have it inline. A fixedposition element is outside the normal flowand therefore, by definition, cannot also be inline.
1）首先，删除display: inline因为，如果您希望块级元素为position: fixed，则不能同时拥有它inline。甲fixed位置元件是正常的流的外侧，因此，根据定义，不能同时是内联。
2) Secondly, remove float: rightsince you want it fixed. According to the spec, it can't be both.
2）其次，删除，float: right因为你想要它fixed。 根据规范，它不能两者兼而有之。
“...如果 'position' 的值为 'absolute' 或 'fixed'，则框是绝对定位的，'float' 的计算值为 'none'...”~W3C 规范
3) And finally, when using absoluteor fixed(fixedis a subset of absoluteaccording to the spec), set a position of the element by adding something like top: 0;and right: 0;which places it with respect to the edges of its parent.
3) 最后，当使用absoluteor fixed(fixed是absolute根据规范的一个子集) 时，通过添加类似的东西来设置元素的位置，top: 0;并将right: 0;其放置在其父元素的边缘。
#rightcolumn {
margin: 0;
font-family: Arial;
font-weight: bold;
height: auto;
width: 300px;
position: fixed;
top: 0; <-- adjust accordingly
right: 0; <-- adjust accordingly
}
Here is the Visual Formatting Model spec.
回答by ehudokai
According to the spec fixed means The element is positioned relative to the browser window. but you're not specifying any (top,right,left,bottom) so it knows where to sit in the window. Try specifying the actual position.
根据规范固定手段 元素相对于浏览器窗口定位。但是您没有指定任何（顶部，右侧，左侧，底部），因此它知道在窗口中的位置。尝试指定实际位置。
回答by tahdhaze09
You can't float and fix a position on an element and expect it to work. Also, you have not declared where you want the element fixed because you have no top, left, right, or bottomin your CSS.
您不能在元素上浮动和固定位置并期望它起作用。此外，您还没有声明要修复元素的位置，因为您的 CSS 中没有top, left, right, 或bottom。
Remove the float, add positioning (top, left, right, or bottom), and it should work just fine.
移除浮动，添加定位（top, left, right, 或bottom），它应该可以正常工作。
<div id="rightcolumn">
<p>blah blah blah</p>
</div>
#rightcolumn {
margin: 0px;
top:0;
right:0; /*places div in top right corner and stays there even when you scroll!*/
font-family: Arial;
font-weight: bold;
height: auto;
width: 300px;
position: fixed;
}
You now have a 300px width box place in the top right hand corner of the browser. Unless you're using IE6 or 7, won't work there.
您现在在浏览器的右上角有一个 300 像素宽度的框。除非您使用 IE6 或 7，否则无法在那里工作。
回答by Steve Reichbach
Also check if the wrapper has enabled hardware acceleration by having -webkit-transform: translate3d(0, 0, 0);
还要检查包装器是否启用了硬件加速 -webkit-transform: translate3d(0, 0, 0);
