HTMLとCSSでレイアウトを整えるとき、要素を特定の位置に配置したい場面がありますよね。
そんなときに使えるのが positionプロパティ です。この記事では、positionの基本と使い分けをやさしく解説します。

positionとは？

positionは、要素の配置方法を指定するCSSプロパティです。位置を調整するには、top、left、right、bottomと組み合わせて使用します。

主なpositionの種類と特徴

基本パターン例

① relativeで少しだけずらす

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

② absoluteで親要素を基準に配置

<div class="parent">
  <div class="child">ここに固定</div>
</div>

.parent {
  position: relative;
}

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

③ fixedでページ右下に固定ボタン

.fixed-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

④ stickyでスクロール時に固定される見出し

.sticky-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
}

おわりに

positionプロパティを理解すると、自由なレイアウトが可能になります。初めはrelativeとabsoluteの違いから試してみるのがおすすめです。

次回は「positionとz-indexの関係」「レスポンシブ対応での注意点」など、さらに深掘りした内容を紹介します！