【CSS】position: fixed の使い方

基本的な使い方

ある要素を画面に固定配置する際に使用される。

<固定ヘッダーの例>

<header>
  <div class="container">
  <p>これはヘッダーです。</p>
  </div>
</header>

.header {
/*ヘッダーを上部に固定*/
  position: fixed
  top: 0;
}

z-indexについて

position: fixedと併用して使用する。
要素同士の重なり順を指定する。

.header {
/*ヘッダーを上部に固定*/
  position: fixed
  top: 0;
  /*数字が大きいほうが上のレイヤーになる*/
  z-index: 10;
}