css - 固定位置在 Chrome 上不起作用

Question

右栏固定位置在 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;
}

Answer 1

1) 首先，删除display: inline因为，如果您希望 block 级元素为 position: fixed , 你不能同时拥有它 inline . fixed position element is outside the normal flow因此，根据定义，也不能是内联的。

2) 其次，删除 float: right因为你想要它fixed . 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) 最后，当使用 absolute 时或 fixed ( fixed 是 absolute according to the spec 的子集)，通过添加类似 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
}

这是 Visual Formatting Model spec .