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