ポジションとzインデックス

position プロパティ

CSS の position プロパティは、要素の配置方法を指定します。以下に主要な値とその用途を示します：

static:

デフォルトの値です。要素は通常の文書の流れに従って配置されます。

オフセットプロパティ（top, right, bottom, left）は使用できません。

.static-example {
  position: static;
}

relative:

要素は通常の文書の流れに従って配置されますが、オフセットプロパティを使用して相対的に移動させることができます。デフォルトの元の位置から指定されたオフセット分だけ移動します。

.relative-example {
  position: relative;
  top: 10px;
  left: 20px;
}

absolute:

要素は通常の文書の流れから除外され、最も近い祖先要素（position が relative, absolute, fixed, sticky のいずれか）の基準位置に基づいて配置されます。

.absolute-example {
  position: absolute;
  top: 50px;
  left: 100px;
}

fixed:

要素はビューポートを基準に固定されます。スクロールしても位置が変わりません。

.fixed-example {
  position: fixed;
  top: 0;
  right: 0;
}

sticky:

要素は通常の文書の流れに従いますが、指定されたオフセット位置に達すると、その位置に固定されます。

css .sticky-example { position: sticky; top: 0; }

### z-indexプロパティ
z-indexプロパティは、要素のスタッキング順序を指定します。positionプロパティがrelative, absolute, fixed, stickyのいずれかに設定されている必要があります。z-indexの値が大きいほど、要素は前面に配置されます。

```css
.z-index-example-1 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1; /* スタッキング順序が低い */
}

.z-index-example-2 {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10; /* スタッキング順序が高い */
}

例

以下に、position と z-index プロパティを組み合わせた例を示します：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .container {
        position: relative;
        width: 300px;
        height: 300px;
        background-color: #f0f0f0;
      }
      .box1 {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 100px;
        height: 100px;
        background-color: #007bff;
        z-index: 1;
      }
      .box2 {
        position: absolute;
        top: 40px;
        left: 40px;
        width: 100px;
        height: 100px;
        background-color: #28a745;
        z-index: 2;
      }
    </style>
    <title>Position and Z-Index Example</title>
  </head>
  <body>
    <div class="container">
      <div class="box1">Box 1</div>
      <div class="box2">Box 2</div>
    </div>
  </body>
</html>

この例では、box1 は z-index: 1 で、box2 は z-index: 2 です。そのため、box2 は box1 の前面に表示されます。

例２

ブラウザの上部に、メインコンテンツをスクロールしても固定されたヘッダを作成します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      header {
        position: fixed;
        width: 100%;
        top: 0px;
        left: 0px;
        background-color: #ccc;
        z-index: 1;
      }
    </style>
    <title>Position and Z-Index Example</title>
  </head>

  <body>
    <header>
      <p>menubar</p>
    </header>
    <main>
      <p>test</p>
      <br /><br /><br />
      <p>test</p>
      <br /><br /><br />
      <p>test</p>
      <br /><br /><br />
      <p>test</p>
      <br /><br /><br />
      <p>test</p>
      <br /><br /><br />
      <p>test</p>
      <br /><br /><br />
      <p>test</p>
      <br /><br /><br />
      <p>test</p>
      <br /><br /><br />
      <p>test</p>
      <br /><br /><br />
      <p>test</p>
      <br /><br /><br />
      <p>test</p>
      <br /><br /><br />
      <p>test</p>
      <br /><br /><br />
    </main>
  </body>
</html>