positionプロパティの使い方

要素の配置方法を制御する position プロパティを解説します。

static（デフォルト）

.static {
  position: static;
}

通常のドキュメントフローに従います。

relative

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

• 元の位置を基準に移動
• 元の場所のスペースは保持される

absolute

.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

• 最も近い positioned な祖先を基準
• ドキュメントフローから外れる

fixed

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

• ビューポートを基準に固定
• スクロールしても位置が変わらない

sticky

.sticky-nav {
  position: sticky;
  top: 0;
}

• relative と fixed のハイブリッド
• スクロール位置に応じて固定される

各値の特性を理解して、適切に使い分けましょう。