Question

右列固定位置适用于Opera＆amp; Firefox，但不是Chrome，任何解决方案？

#rightcolumn { 
margin: 0px 0px 0px 0px;
float: right;
font-family: Arial;
font-weight: bold;
height: auto;
width: 300px;
display: inline;
position: fixed;
}

Answer 1

1）首先，删除display: inline，因为如果您希望块级元素为position: fixed，则不能同时使用inline。float: right。 fixed position element is outside the normal flow因此，根据定义，也不能内联。

2）其次，删除fixed，因为您需要它absolute。 According to the spec，它不可能两者兼而有之。

"...if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none'..." ~ W3C spec

3）最后，当使用fixed或fixed（absolute是top: 0; according to the spec的子集）时，请设置元素的位置添加类似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 }的内容，将其放置在其父级的边缘。

{{1}}

这是Visual Formatting Model spec。

Answer 2

根据规范固定意味着元素相对于浏览器窗口定位。但你没有指定任何（顶部，右侧，左侧，底部），所以它知道在窗口中的位置。尝试指定实际位置。

Answer 3

您无法浮动并修复元素上的位置并期望它能够正常工作。此外，由于CSS中没有top，left，right或bottom，因此您尚未声明要修复元素的位置。

移除浮动，添加定位（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;
}

现在，您在浏览器的右上角有一个300像素宽的框。除非您使用IE6或7，否则将无法在那里工作。

Answer 4

还要通过使-webkit-transform: translate3d(0, 0, 0);

检查包装程序是否启用了硬件加速

固定位置不适用于Chrome

4 个答案: