position(要素の配置を細かく指定する)

このレッスンでは、CSSのposition(relative・absolute)を使った細かい配置指定を学び、要素を狙った位置に重ねられるようになることを目標にします。「CSS position absolute relative」で調べている方向けです。

position: relativeは「元の位置を基準に少しずらす」、position: absoluteは「親要素を基準にした自由な位置に配置する」ための指定です。バッジやラベルを画像の隅に重ねるときなどによく使います。

サンプルコードでは、親要素の.cardにposition: relative;を指定し、その中の.badgeにposition: absolute; top: -10px; right: -10px;を指定することで、カードの右上の角に「NEW」バッジを少しはみ出す形で重ねています。

初心者がよくつまずくのが、親要素にposition: relativeを指定し忘れることです。これを忘れると、子要素のposition: absoluteはページ全体を基準にしてしまい、意図した場所に配置されません。この2つはセットで使うのが基本というルールを必ず覚えておきましょう。

親要素にrelativeを指定し、その中の子要素にabsoluteを指定すると、「この箱の中の好きな位置」に自由に部品を配置できるようになります。カードデザインやバッジの表示など、実務でも頻繁に使われるテクニックです。