CSS positionのfixedで要素の位置を固定

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

目次 positionのfixed
要素の位置を固定して配置する(fixed)

positionのfixed

書き方 position : 値
fixed
ウィンドウの表示領域を基準とした配置になります。
位置が固定され、スクロールしても動きません。
fixedは固定したという意味です。
positionプロパティの値として、他にstatic,relative,absolute,stickyがあります。
備考 左上にある水色の四角はfixedを指定しています。
表示領域のtopとleftを指定しているので位置が固定されスクロールしても動きません。
初期値 static
継承 なし
参考(MDN) https://developer.mozilla.org/ja/docs/Web/CSS/position

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

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

<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 positionのrelativeで要素を配置する
CSS z-index 要素の重なる順番を指定する

△上に戻る