position 入門 — 重ねる・貼り付けるための4つの値

position は、要素をふつうの流れから外して自由な位置に置くための指定です。便利ですが、仕組みを知らずに使うと予想外の場所に飛んでいきます。

4つの値

• static … 初期値。ふつうに上から順に並ぶ
• relative … 元の場所を保ったまま、そこからずらせる
• absolute … 流れから外れ、基準となる親からの位置で置く
• fixed … 画面に対して固定。スクロールしても動かない
• sticky … 途中まで一緒にスクロールし、指定位置で貼り付く

absolute の基準はどこか

ここが最大のつまずきです。absolute を指定した要素は「いちばん近い、position が static ではない親」を基準に配置されます。そういう親がひとつも無い場合、ページ全体が基準になります。

つまり、囲んでいる親に position: relative を付けておく必要があります。この1行を忘れると、要素はページの隅に飛んでいきます。「なぜか変な場所に行く」の原因は、ほぼこれです。

absolute は場所を取らない

absolute にした要素は、ページの流れから完全に外れます。そのぶんの場所が空くので、後ろの要素が詰めて表示されます。これが「要素が重なる」原因です。

重なり順を変えたいときは z-index を使います。数字が大きいほど手前です。ただし、position が static のままだと z-index は効きません。セットで覚えてください。

sticky が便利

sticky は、ふだんは一緒にスクロールして、指定した位置に来ると貼り付く動きをします。追従するヘッダーや、表の見出し行に使います。top などの位置指定を必ず書く必要があるのが注意点です。

fixed の注意点

fixed は画面に固定されます。スマホでは画面が狭いので、固定したヘッダーやバナーが内容を隠してしまいがちです。使うなら高さを抑えるか、スマホでは解除することを検討してください。

そもそも position を使わない選択

横並びや中央揃えのために position を使う必要はありません。Flexboxのほうが簡単で、崩れにくいです。position が本当に要るのは「重ねる」「貼り付ける」ときだけと考えてください。