【position:fixed】固定配置する

positionプロパティの値にfixedを指定すると、その要素は絶対位置で配置されますが、ウィンドウ上の指定された位置に固定され、スクロールしても位置が移動しなくなります。

このfixedを指定された要素は、position:absoluteを指定した場合と同様に通常の配置とは別に扱われるようになるため、他の要素の配置にはまったく影響を与えない独立した配置となります。

また実際に表示される位置については、ウィンドウの表示領域を基準とし、そこからの位置をtopleftrightbottomプロパティを使用し設定します。

topではウィンドウの表示領域(画面で見えている範囲)の上から指定した要素の上までの距離、leftではウィンドウの表示領域の左から指定した要素の左までの距離、rightではウィンドウの表示領域の右から指定した要素の右までの距離、bottomではウィンドウの表示領域の下から指定した要素の下までの距離を指定します。

書式

  • position : fixed ……… 位置を固定して表示する
  • top : ……… 上からの距離
  • left : ……… 左からの距離
  • right : ……… 右からの距離
  • bottom : ……… 下からの距離

★:実数値+単位、%

使用した時の例

.sample1 {position: fixed; top:0px; left:10px; color:red; font-weight:bold;}

.sample00 {background:#EEF4FA;}
<div class="sample00">
position:fixed(fixedの部分は画面の左上に表示されてる)
  <div class="sample1">この部分がfixed</div>
  <div>続くボックス</div>
</div>

ブラウザ上の表示例

position:fixed(fixedの部分は画面の左上に表示されてる)
この部分がfixed
続くボックス

対応ブラウザなどのデータ

初期値 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer7~ , Google Chrome1~ , Firefox1~ , Opera4~ , Safari1~

関連情報