positionプロパティを使用する際の注意点｜ブラウザ間での違い
positionプロパティを使って絶対位置・固定位置を指定した際に、ブラウザ間で配置が異なる事がある。その際の対処法を紹介する。
まずはpositionプロパティのおさらい。
positionプロパティとは
positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する際に使用します。
positionプロパティで指定するのは、配置方法（基準位置）のみです。 実際の表示位置の指定には、 top、 bottom、 left、 rightを併用して、基準位置からの距離を設定する必要があります。
■値
static
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。
relative
相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
fixed
絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。
引用元：HTMLクイックリファレンス
サンプルサイト
これを踏まえて、以下の様なWebサイトを作成しました。
プロジェクトNo.5：Horizon
このWebサイトでは細かい位置設定が大切になっています。
仕様
星はstaticでスクロールすると見えなくなる。
「Scroll down」や「Horizon」のテキストと海は、fixedで画面下部固定にして、スクロールしてもついてくる。
太陽はabsoluteで画面最下部に配置して、スクロールした後に見える。
HTML
<div id="description">← Scroll down</div> <div id="star1">★</div> <div id="star2">★</div> <div id="star3">★</div> <div id="star4">★</div> <div id="star5">★</div> <div id="copy">Horiz n</div> <div id="sea"></div> <div id="sun"></div>
CSS
#description{ position: fixed; right: 0; top: 60px; /* 省略 */ } #copy{ position: fixed; width: 350px; /* position: fixed時の左右中央表示 */ left: 0; right: 0; margin: auto; bottom: 340px; /* 省略 */ } #sea{ position: fixed; bottom:0; /* 省略 */ } #sun{ position: absolute; top: 2640px; /* position: absolute時の左右中央表示 */ width: 60px; left: 160px; /* 本来、中央表示だと0指定だが少しずらす */ right: 0; margin: auto; /* 省略 */ }
positionプロパティを使用する際の注意点
absoluteまたはfixedの利用時の左右中央表示
widthを与えたオブジェクトに、leftとrightをそれぞれ0にして、margin: autoにする。
参考：position:absolute、margin:0 autoして左右中央配置する - not good but great
fixedのオブジェクトの高さ指定はbottomで指定する
topから指定するとブラウザによってツールバーなどがある場合、高さが変わってくるため、bottomから指定するとブラウザ間での違いがなくなる。
absoluteのオブジェクトの高さ指定はtopで指定する（オブジェクトがスクロール後にある場合）
absoluteの基準位置に関しては、
親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
なので、topから指定した場合は、「スクロールした後」は高さが一致します。スクロールしていない状態だとツールバーなどの高さで変わってしまします。
また、bottomからの指定にすると「スクロールしていない状態の画面下部が基点」になるので、スクロールした後の配置の違いが生じます。（ツールバーなどの分、スクロールしていない状態の画面の縦幅がブラウザ間で異なるため）
この辺は細かい話なので、実際にサンプルソースをいじってみていただけるとご理解いただけるかと思います。
position以外で注意すべき点
ブラウザの余白設定
ブラウザによって余白が異なるため、bodyセレクタに以下のスタイルを指定。
CSS
body{ /* ブラウザによる余白の削除 */ margin: 0; padding: 0; /* 省略 */
フォント
Webフォントを使う事でブラウザによって使用できないフォントなど気にせずに統一することができます。
今回はGoogleフォントの以下のフォントを利用しました。
Google Fonts
使い方は簡単。
好きなフォントを選んで、サイトにあるコードをコピーしてソースに張り付け。
HTML
headに以下のコードを追加。
<head> <!-- 省略 --> <link href='http://fonts.googleapis.com/css?family=Paytone+One' rel='stylesheet' type='text/css'> </head>
CSS
適用させたい要素にfontを指定。
#copy{ font-family: 'Paytone One', sans-serif; /* 省略 */ }
positionプロパティはなかなか難しいですが、基準点がどこなのか意識して使うと理解しやすいかと思います。
位置設定がシビアなサイトではブラウザチェックが必須です。
