はじめに

CSSでレイアウトを組むときに欠かせないのが position プロパティ。
中でも absolute、relative、fixed の3つはよく登場しますが、初心者にとっては違いが分かりづらく、混乱しがちです。

この記事では、それぞれの違いや実務での使い分け方、よくあるつまずきポイントを自分用の備忘録としてまとめました。

①それぞれの違いをざっくり一言で！

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

実務での使用例:

.container {
    position: relative;
}
.button {
    position: absolute;
    top: 10px;
    right: 10px;
}

実務での使用例:

.back-to-top {
    position: fixed;
    botton: 20px;
    right: 20px;
}

実務での使用例: