今まであまり機会がなかったのでやったことなかったけどabsoluteの子要素にabsoluteを指定することになったので覚書。どうなるんだっけ？
結論から言うと
ブロックB（position: absolute)の子であるブロックCにposition: absoluteを指定するとブロックCの起点はブロックBの左上になる。※ブロックBはブロックAの子。
シンプルな結論なのになぜ迷ってしまったかというと、いつもrelativeの子にabsoluteを書くパターンばかりやってたので。もしかして下記のような入れ子構造の場合、ブロックCの起点はブロックAなのか？と思ってしまった。
ブロックA（relative)＞ブロックB（absolute)＞ブロックC（absolute)
この場合はブロックBの起点はAの左上、Cの起点はBの左上。
positionについて調べ直す
お世話になっているHTMLクイックリファレンス
static
特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。absolute
http://www.htmq.com/style/position.shtml
絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。
親が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.
https://www.w3.org/TR/CSS2/visuren.html#positioning-scheme
Google先生翻訳。
静的ボックスは通常のボックスであり、通常のフローに従ってレイアウトされています。 「上部」、 「右」、 「ボトム」、および「左」 のプロパティは適用されません。
絶対のボックスの位置（および場合によってはサイズ）は、’top’、 ‘right’、 ‘bottom’、および ‘left’ プロパティで指定されます。これらのプロパティは、ボックスの包含ブロックに関するオフセットを指定します 。絶対に配置されたボックスは、通常のフローから取り出されます。これは、後の兄弟のレイアウトに影響を与えないことを意味します。また、絶対配置の ボックスにはマージンが ありますが、他のマージンと一緒に折りたたまれることはありません。
同上 日本語訳
コメント