CSSにおける固定位置指定

ここでは、固定位置指定について詳しく見ていきましょう。 これは絶対位置指定に似ていますが、違いは スクロールバーがある場合のこれらの位置指定タイプの 挙動に現れます。

ページをスクロールすると、絶対位置指定された 要素はページと一緒にスクロールします。 以下の例をご覧ください：

html<div id="elem"></div>
<div id="content">
  some long text
</div>

css#elem {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

#content {
  margin: 0 auto;
  width: 300px;
  text-align: justify;
  font: 16px Arial;
}

Результат:

ページをスクロールしたときに 位置指定された要素がその場に留まるように することもできます。そのためには、 プロパティ position の値を fixed に設定して 固定位置指定を設定します：

html<div id="elem"></div>
<div id="content">
  some long text
</div>

css#elem {
  position: fixed; /* 固定位置指定を設定 */
  top: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

#content {
  margin: 0 auto;
  width: 300px;
  text-align: justify;
  font: 16px Arial;
}

Результат: