Фиксированная позиция не работает в 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, потому что, если вы хотите, чтобы элемент уровня блока был position: fixed, вы также не можете иметь его inline.Элемент позиции fixed находится вне нормального потока и, следовательно, по определению также не может быть встроенным.

2) Во-вторых, удалите float: right, так как вы хотите его fixed. Согласно спецификации , это не может быть и то и другое.

"... если 'position' имеет значение 'absolute' или 'fixed', поле позиционируется абсолютно, вычисленное значение 'float' равно 'none' ... "~ W3C spec

3) И, наконец, при использовании absolute или 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
}

Вот визуальное форматирование Модель Spec .

Answer 2

В соответствии со спецификацией означает, что элемент расположен относительно окна браузера.но вы не указываете ничего (сверху, справа, слева, снизу), чтобы он знал, где сидеть в окне.Попробуйте указать фактическую позицию.

Answer 3

Вы не можете плавать и фиксировать позицию на элементе и ожидать, что он будет работать. Кроме того, вы не указали, где вы хотите исправить элемент, потому что у вас нет top, left, right или bottom в вашем CSS.

Удалите float, добавьте позиционирование (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);