固定位置は

Question

右列の固定位置は、Chromeですべてのソリューションをオペラ&の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

スペック固定手段によると、要素はブラウザウィンドウに対して配置されます。 （上、右、左、下）を指定していないので、ウィンドウにどこに座るかが分かります。実際の位置を指定してみてください。

Answer 2

あなたはフロート要素の位置を固定し、それが動作するように期待することはできません。また、あなたはあなたが持っているので、要素を固定したい場所を宣言していない無top、left、right、またはあなたのCSSで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; 
} 

ブラウザの右上に300px幅のボックスがあります。 IE6または7を使用している場合を除き、そこでは動作しません。

Answer 3

1）最初に、ブロックレベルの要素をposition: fixedにする場合は、inlineにすることはできないため、最初にdisplay: inlineを削除します。 A fixed position element is outside the normal flowであり、定義上、インラインにすることはできません。

2）あなたはfixedそれをしたいので、第二に、float: rightを削除します。 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を使用して、エッジに対してそれを置くtop: 0;ようなものとright: 0;を添加することによって要素の位置を設定absoluteaccording to the spec）のサブセットでありますその親の

#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があります。