Days on the Moon

この記事はCSS Advent Calendar 2022の11日目の分です。

CSSでpositoin: absolute（絶対配置）の要素の位置を指定するときには、top、left、right、bottomプロパティ（またはこれらを一括指定するinsetプロパティ）がよく使われます。もし絶対配置の要素にそれらのプロパティが指定されていなかったら、その要素の位置はどこになるでしょうか？

その場合、絶対配置の要素は原則として「その要素がpositoin: static（静的配置）だった場合の位置（静的位置矩形; static-position rectangle）」に置かれます。絶対配置の要素の親要素がインライン要素だった場合、絶対配置の要素自身がdisplay: inline（インライン要素）かdisplay: block（ブロック要素）かによって位置が異なってくることになります（インライン要素の子要素が絶対配置のときのデモ）。

この挙動をうまく利用すれば、絶対配置の要素の親要素にposition: relativeをつけて回らなくても、絶対配置の要素を期待する位置に置けることがあります。その場合、細かな位置の調整にinsetプロパティなどを使うことはできないので、transform: translate(...)やmarginプロパティを使うことになります。

フレックスアイテムが絶対配置のとき

「原則として」というからには例外もあります。絶対配置のフレックスアイテムでinsetプロパティなどが指定されていないものは、フレックスコンテナの位置に置かれます。

（「フレックスコンテナ」はdisplay: flexまたはdisplay: inline-flexが指定された要素、「フレックスアイテム」はフレックスコンテナの子要素です。）

グリッドアイテムが絶対配置のとき

グリッドアイテムが絶対配置のときはちょっと複雑です。グリッドコンテナが静的配置なら、絶対配置のグリッドアイテムでinsetプロパティなどが指定されていないものは、グリッドコンテナの位置に置かれます。

グリッドコンテナが静的配置でないなら、絶対配置のグリッドアイテムでinsetプロパティが指定されていないものは、gridプロパティなどで指定されたグリッド領域の位置に置かれます（グリッドアイテムが絶対配置のときのデモ）。

（「グリッドコンテナ」はdisplay: gridまたはdisplay: inline-gridが指定された要素、「グリッドアイテム」はグリッドコンテナの子要素です。）

とはいえ、フレックスボックスやグリッドと絶対配置を組み合わせるとCSSのコードがだいぶ複雑になるので、普段は避けたほうがよいと思います。