CSS positionのfixedで要素を配置する

CSSのpositionプロパティのfixedで、要素を配置するサンプルです。

目次

仕様 positionプロパティのfixedの仕様
サンプル 要素の位置を固定して配置する

positionプロパティのfixedの仕様

position : 値

positionプロパティのfixedは、ウィンドウの表示領域を基準として要素を配置します。

説明
fixed ウィンドウの表示領域を基準とした配置になります。
位置が固定され、スクロールしても動きません。
fixedは固定したという意味です。
値を継承しない
  • 左上にある要素は、サンプルです。表示領域のtopとleftを指定しています。位置が固定され、スクロールしても動きません。
  • positionプロパティの値として、他にstatic,relative,absolute,stickyがあります。
  • 以下はMDNのpositionプロパティのリンクです。
    https://developer.mozilla.org/ja/docs/Web/CSS/position

 

要素の位置を固定して配置する

要素の位置を固定して配置するサンプルです。

<style>
  .box1 {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 100px;
    height: 50px;
    background-color: #e0ffff;
    color: #000;
    border: 1px solid #000;
  }
</style>
<body>
  <div class="box1">box1</div>
</body>

3行目は、position:fixedです。
4行目は、topでウィンドウの上の位置から下に20pxずれます。
5行目は、leftでウィンドウの左の位置から右に20pxずれます。

ウィンドウ表示領域の左上を基準にします。

画面イメージは次のようになります。

topとleftの代わりにbottomとrightの指定もできます。
マイナスの数値の指定もできます。

fixedの
テスト

関連の記事

CSS 回り込みと解除のサンプル(floatとclear)
CSS positionのrelativeで要素を配置する
CSS positionのabsoluteで要素を配置する
CSS z-index 要素の重なる順番を指定する
CSS display 要素(ボックス)の表示方法を指定する

△上に戻る