OffSet家族1-offsetParent

オフセットファミリについて言えば、次の 3 つの点で分析できます。

オフセット親
オフセット上、オフセット左
offsetWidth と offsetHeight を1 つずつ
分析してみましょう。

オフセット親

まず、公式の定義を見てみましょう。

HTMLElement.offsetParent は、要素または最も近い table、td、th、body 要素を含む、最も近い (包含レベルで最も近い) 位置決め要素へのポインターを返す読み取り専用属性です。要素の style.display が "none" に設定されている場合、offsetParent は null を返します。
概念を読んで少し混乱した場合は、段階的に分析してみましょう。

要素自体が配置されていない場合

親要素も祖先要素も配置されていない場合

前のレベルまたは最も近い祖先が td,th の場合、el.offsetParent は td,th を返します。
前のレベルまたは最も近い祖先がテーブルの場合、el.offsetParent はテーブルを返します。
前のレベルまたは最も近い祖先が配置されておらず、table、td、または th ではない場合、el.offsetParent は body を返します。

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <table>
        <thead class="thead">
            <tr class="trone">
                <th class="th">
                    <span class="span"></span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="trtwo">
                <td class="td">
                    <a href="#" class="a">学废了</a>
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        console.log(document.querySelector(".span").offsetParent);//th
        console.log(document.querySelector(".th").offsetParent);//table
        console.log(document.querySelector(".trone").offsetParent);//table
        console.log(document.querySelector(".thead").offsetParent);//table
        console.log(document.querySelector(".a").offsetParent);//td
        console.log(document.querySelector(".td").offsetParent);//table
        console.log(document.querySelector(".trtwo").offsetParent);//table
        console.log(document.querySelector(".son").offsetParent);//body
        console.log(document.querySelector(".father").offsetParent);//body
    </script>

印刷結果を見てみましょう。
ここに画像の説明を挿入します
上記の推測と同様に、配置状況を見てみましょう。

要素自体が配置されていない場合は、親要素または祖先要素が配置されます

ここでまずケースを見てみましょう

<body>
    <div class="grandpa" style="position: relative;">
        <div class="father" style="position: absolute;">
            <div class="son"></div>
        </div>
    </div>
    <div class="grandma" style="position: absolute;">
        <div class="mama">
            <div class="sister"></div>
        </div>
    </div>
    <div class="big" style="position: static;">
        <div class="small"></div>
    </div>
    <div class="more" style="position: fixed;">
        <div class="lit"></div>
    </div>
    <script>
        console.log(document.querySelector(".son").offsetParent); //father
        console.log(document.querySelector(".father").offsetParent); //grandpa
        console.log(document.querySelector(".sister").offsetParent); //grandma
        console.log(document.querySelector(".small").offsetParent); //body
        console.log(document.querySelector(".lit").offsetParent); //more
    </script>
</body>

親要素が配置されている限り、配置された親要素に最も近い dom 要素が検索されることがわかりますが、
static を除いて、上の小さな親要素は配置されているにもかかわらず、配置された要素は静的であるため、依然として本体を指します。
もう 1 つの注意すべき点は、テーブルの場合は少し異なります。以下を参照してください。

<table style="position: fixed;">
        <thead class="thead" style="position: fixed;">
            <tr class="trone">
                <th class="th">
                    <span class="span"></span>
                </th>
            </tr>
        </thead>
    </table>
    	 console.log(document.querySelector(".span").offsetParent); //th
        console.log(document.querySelector(".trone").offsetParent); //thead

2 つの出力結果のうちの 1 つは th で、もう 1 つは thead です。

知らせ

上記のスパンの最も近い非静的位置決め要素は thead ですが、th は依然として出力されていることがわかります。
しかし、tron が最も近い非静的配置要素を見つけたことがわかりました。
表の場合は特に注意し、確認結果を多めに出力してください。

要素自体が配置されている場合

親要素または祖先要素が配置されていない場合、または静的（テーブルではない）場合、本体を検索します（固定されていない場合）

テーブル要素の場合は特に注意が必要で、
この場合は本体を直接検索してください。

親要素または祖先要素が非静的配置である場合、配置された親要素に最も近い dom 要素を検索します (固定されていない場合)。

要素自体が配置および固定されている場合、offsetParent は null になります。

  <div class="big" style="position: absolute;">
        <div class="small" style="position: absolute;"></div>
    </div>
    <div class="more" style="position: fixed;">
        <div class="lit" style="position: static;"></div>
    </div>
    <div class="mama">
        <div class="sister" style="position: absolute;"></div>
    </div>
     <div class="father" style="position: absolute;">
        <div class="son" style="position: fixed;"></div>
    </div>
       console.log(document.querySelector(".sister").offsetParent); //body
        console.log(document.querySelector(".small").offsetParent); //big
        console.log(document.querySelector(".lit").offsetParent); //more
         console.log(document.querySelector(".son").offsetParent);//null

特殊な場合には、body の offsetParent が null になります。

ここに画像の説明を挿入します

要約する

この記事では offsetParent について紹介しますが、offsetTop、offsetLeft、offsetWidth、offsetHeight については後ほど詳しく紹介していきますので、ご不明な点がございましたらコメントください。