「position:relative」と「position:absolute」の関係性は親要素以外でも良いのでしょうか？

Question

「position:relative;」
と
「position:absolute;」
の関係性は祖先要素でも適用されますでしょうか？

div1{
 position:relative;
}
div2{
}
div3{
 position:absolute;
 left:10px;
}

この場合、

div3はdiv1のボックスを基準点にして左から10pxの位置に配置されるでしょうか？

ご解答よろしくお願い致します。

Answer 1

position: absoluteはうまい言い方が見つかりませんが、
上の要素の中で一番近いrelativeが付与されている要素が基準になります。
relativeの指定がなければウィンドウの左端が基準になります。

div1~div3までが入れ子になっていれば、質問者さんのおっしゃるとおりになるかと。
サンプル

Comments

[ShunYoshizawa]

ご回答ありがとうございます。

つまり、、親要素限定ではなくDOMツリーをさかのぼっていった時に一番近いrelativeが基準になるということでしょうか？

[CyberMergina]

>親要素限定ではなくDOMツリーをさかのぼっていった時に一番近いrelativeが基準になるということでしょうか？
そういうことになります。

[ShunYoshizawa]

ありがとうございます！！！