JavaScript offsetParent のケーススタディ

1. offsetParentの定義: offsetParentは子要素に最も近い位置に配置された親要素です(位置:絶対相対固定)。親要素に位置指定がない場合、offsetParentは: body要素

2. 定義によれば、次のような状況がある。

要素自体の配置が固定で、親要素の配置が固定でない場合、offsetParent の結果は null になります (Firefox では body、他のブラウザでは null)
要素自体には固定の位置がなく、親要素にも位置がなく、offsetParentは<body>要素です。
要素自体には固定の位置はなく、親要素に位置があり、offsetParent は、配置された自身に最も近い親要素です。
<body> 要素の offsetParent が null です

<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ドキュメント</title>
</head>
 
<本文>
 <div id="test1" style="position:fixed"></div>
 
 <div id="test2"></div>
 
 <div id="div0" style="position:absolute;">
    <div id="div1" style="position:absolute;">
        <div id='test3'></div>    
    </div>    
</div>
 
<スクリプト>
    /*
    [1] 要素自体の位置が固定で、親要素の位置が固定でない場合、offsetParentの結果はnull（Firefoxではbody、他のブラウザではnull）になります。
    */
    var test1 = document.getElementById('test1');
    console.log('test1 offsetParent: ' + test1.offsetParent);
    /*
    【2】要素自体には固定の位置がなく、親要素にも位置がなく、offsetParentが<body>要素である*/
    var test2 = document.getElementById('test2');
    console.log('test2 offsetParent: ' + test2.offsetParent);
    /*
    【3】要素自体には固定の位置がなく、親要素にも位置がなく、offsetParentが<body>要素である*/
    var test3 = document.getElementById('test3');
    console.log('test3 offsetParent: ' + test3.offsetParent);
    /*
    【4】<body>要素のoffsetParentがnullである
    */
     */
    console.log('body offsetParent: ' + document.body.offsetParent);//null
 
</スクリプト>
</本文>
 
</html>

3. IE7では、positioningのoffsetParentに関して次のようなバグがあります。

[1] 要素自体が絶対位置または相対位置に配置され、親要素に位置指定された要素がない場合、IE7ブラウザではoffsetParentは<html>です。

<div id="test1" style="position:absolute;"></div>    
<スクリプト>
//IE7 ブラウザは <html> を返し、他のブラウザは <body> を返します
コンソールにログ出力します。
</スクリプト>

<div id="test2" style="position:relative;"></div>    
<スクリプト>
//IE7 ブラウザは <html> を返し、他のブラウザは <body> を返します
コンソールにログ出力します。
</スクリプト>

<div id="test3" style="position:fixed;"></div>    
<スクリプト>
//Firefox は固定位置の問題を考慮せず <body> を返しますが、他のブラウザは null を返します
コンソールにログ出力します。
</スクリプト>

【2】親要素にhaslayoutをトリガーする要素または配置された要素があり、offsetParentの結果が要素に最も近い親要素であり、配置されたかhaslayoutをトリガーする場合

<div id="div0" style="display:inline-block;">
    <div id='テスト'></div>    
</div>
<スクリプト>
//IE7 ブラウザは <div id="div0"> を返し、他のブラウザは <body> を返します
コンソールにログ出力します。
</スクリプト>

<div id="div0" style="position:absolute;">
    <div id="div1" style="display:inline-block;">
        <div id='テスト'></div>    
    </div>    
</div>
<スクリプト>
//IE7 ブラウザは <div id="div1"> を返し、他のブラウザは <div id="div0"> を返します
コンソールにログ出力します。
</スクリプト>

<div id="div0" style="display:inline-block;">
    <div id="div1" style="position:absolute;">
        <div id='テスト'></div>    
    </div>    
</div>
<スクリプト>
//すべてのブラウザは <div id="div1"> を返します
コンソールにログ出力します。
</スクリプト>

JavaScript offsetParent ケースの詳細な説明については、これで終わりです。JavaScript offsetParent に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: