absoluteの子要素にabsoluteを指定するとどうなる?

今まであまり機会がなかったのでやったことなかったけど

absoluteの子要素にabsoluteを指定することになったので覚書。

 

結論から言うと

ブロックB(position: absolute)の子であるブロックCに(position: absolute)を指定すると

ブロックCの起点はブロックBの左上になる。

 

シンプルな結論なのになぜ迷ってしまったかというと、

いつもrelativeの子にabsoluteを書くパターンばかりやってたので。

もしかして下記のような入れ子構造の場合、ブロックCの起点はブロックAなのか?と思ってしまった。

ブロックA(relative)>ブロックB(absolute)>ブロックC(absolute)

この場合はブロックBの起点はAの左上、Cの起点はBの左上。

 

positionについて調べ直す

いつもお世話になっているHTMLクイックリファレンス

static
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。

absolute
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。

position-スタイルシートリファレンス
HTMLタグ・スタイルシート・特殊文字等の早見表

親がstatic以外なら起点になる。

 

一応W3Cを参照。英語だから読めないけど。

staticThe box is a normal box, laid out according to the normal flow. The ‘top’‘right’‘bottom’, and ‘left’ properties do not apply.

absoluteThe box’s position (and possibly size) is specified with the ‘top’‘right’‘bottom’, and ‘left’ properties. These properties specify offsets with respect to the box’s containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapsewith any other margins.

Visual formatting model

Google先生翻訳。

静的ボックスは通常のボックスであり、通常のフローに従ってレイアウトされています。 「上部」、 「右」、 「ボトム」、および「左」 のプロパティは適用されません。

絶対のボックスの位置(および場合によってはサイズ)は、‘top’、 ‘right’、 ‘bottom’、および ‘left’ プロパティで指定されます。これらのプロパティは、ボックスの包含ブロックに関するオフセットを指定します 。絶対に配置されたボックスは、通常のフローから取り出されます。これは、後の兄弟のレイアウトに影響を与えないことを意味します。また、絶対配置の ボックスにはマージン ありますが、他のマージンと一緒に折りたたまれることはありません。

 

コメント