見出し画像

【CSS】親要素Aのposition: relativeの下に子要素Bのposition: absoluteがあって、さらにその下の孫要素Cにはposition: absoluteが設定されている場合、孫要素Cの位置は親要素Aのposition: relativeで決まるの？　子要素Bのposition: absoluteで決まるの？🤔

gorojy

孫要素Cの位置は、子要素Bの`position: absolute`で決定されます。CSSの`position`プロパティにおいて、`position: absolute`が設定された要素は、最も近い`position`が`static`以外で指定された祖先要素に対して相対的に配置されます。このルールは、ネストされた`position: absolute`の要素にも適用されます。

具体的には、孫要素Cは子要素Bに対して相対的に配置されることになります。子要素Bは、`position: absolute`によって親要素Aの`position: relative`に対して相対的に配置されていますが、孫要素Cの基準点は直接的に子要素Bになります。つまり、孫要素Cの`top`、`right`、`bottom`、`left`のプロパティは、子要素Bのマージンエリアの端からの距離を指します。

シンプルな例:

以下は、この動作を示す簡単な例です。

HTML:

<div class="parent">
    <div class="child">
        <div class="grandchild">C</div>
    </div>
</div>

CSS:

.parent {
    position: relative;
    height: 200px;
    width: 200px;
    background-color: lightblue;
}

.child {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 100px;
    width: 100px;
    background-color: lightcoral;
}

.grandchild {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 50px;
    width: 50px;
    background-color: lightgreen;
}

この例では、`parent`要素が`position: relative`であり、`child`要素がその中に`position: absolute`で配置されています。さらに、`child`要素の中に`grandchild`（孫要素）があり、これも`position: absolute`で指定されています。`grandchild`要素は、`child`要素の左上から`top: 10px`、`left: 10px`の位置に配置されます。

このように、`position: absolute`が設定された孫要素Cは、その直接の親（子要素B）に対して相対的に配置され、親要素Aの`position: relative`は直接の基準点とはなりません。

（そういうことなんねー！　知れば知るほど面白いCSS！　まさに趣味に最適っすね！😁）

　俺も電子本で、HTML、CSS、JavaScriptの本を出版しておりますッ！　ご興味あれば、よろしくお願いいたしますッ！！

　それでは、最後まで読んでいただき、ありがとうございましたッ！！

いいなと思ったら応援しよう！

gorojy
よろしくお願いしますッ！