absoluteはどの親を基準にする？position:relativeで配置先を確かめよう

カードの右上へバッジを置きたいのに、思った場所へ出てこない。position:absoluteは、すぐ上の親をいつでも基準にする指定ではないよ。

今回は外側の枠と内側のカードを使い、バッジがどちらへ合わせて置かれるかを確認する。HTMLとCSSの親子関係が分かると読みやすい、ブラウザだけの作例だよ。

配置の基準になる箱がある

要素の位置や大きさを計算する基準の箱を、包含ブロックと呼ぶ。今回のabsoluteのバッジでは、positionがstatic以外の祖先などが基準になり得る。

「HTMLですぐ上にある要素」と「配置の基準」は、同じとは限らないんだ。作例の外側の枠には最初からrelativeがあり、内側のカードは初めstaticにしている。

.outer { position: relative; }
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

この条件では、バッジは内側のカードを飛び越えて、外側の枠の右上へ配置される。

内側へrelativeを付けると基準が変わる

.inner { position: relative; }

内側のカードにもrelativeを付けると、バッジに近い側の基準ができる。topとrightの指定を変えなくても、バッジは内側のカードの右上へ移るよ。

この例ではinner自身を動かすためのtopなどは指定しない。relativeという配置の種類を変えただけで、内側のカード自体の位置は同じままなんだ。

作例で、動いたものを分けて見る

1. 初期状態で、バッジが外側の右上にあることを見る。
2. 「内側をrelativeにする」をオンにし、バッジがカードの右上へ移ることを確認する。
3. 表示欄で、内側のカードの位置とバッジの位置を比べる。
4. 「最初から試す」で初期状態へ戻す。

作例は、どちらの状態でもバッジが表示枠の外へ飛び出さないようにしている。バッジ自体のtop・rightは変えていないよ。

absoluteは、通常の並びの場所を持たない

absoluteの要素は通常のフローから外れ、ほかの内容のために同じ場所を空けるとは限らない。バッジが文字へ重なる場合は、配置の基準だけでなく、重なってよい範囲も確認しよう。

見た目を整えるために本来の本文をabsoluteで並べると、文章量や画面幅が変わったときに重なりやすくなる。カード本体の並びには、通常のブロックやFlexなどが適する場合もあるよ。

relativeだけが基準を作るわけではない

transformなど、ほかのプロパティでも包含ブロックができる場合がある。今回の作例はそうした指定を入れず、positionの違いへ絞っている。

実際のページで想定外の位置になるときは、祖先を順にたどり、position以外の指定も確認しよう。「一番近いrelativeだけを見れば、すべて説明できる」とは覚えないようにしたいね。

編集部ではChromiumで切替前後の座標とリセットを確認した。位置と元の場所の違いはrelative・transform・margin、別の追従する配置はstickyとスクロール枠も参考になるよ。