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の
テスト