Position

概要

positionプロパティは、CSSレイアウトの中核を担うプロパティで、static、relative、absolute、fixed、stickyの5つの配置モードを提供します。要素がドキュメントフローにどのように参加するか、またはフローから外れるかを制御します。ナビゲーションバーの固定表示、ツールチップの配置、モーダルのオーバーレイなど、現代のウェブデザインのほぼすべてで使用される基本機能です。

対応ブラウザ

基本構文

.header {
  position: sticky;
  top: 0;
}
.modal {
  position: fixed;
  inset: 0;
}

実務での使いどころ

• 固定ヘッダーの実装

  position: stickyやfixedを使用して、スクロール時もヘッダーやナビゲーションを画面上部に固定表示します。

注意点

アクセシビリティ

• position: fixedで固定された要素がコンテンツを覆い隠さないよう、十分なスクロール余白を確保してください。

参考リンク

• MDN Web Docs — Position