15

JavaScriptでポジショニングをしようとしています。私は、最上位ノードまでの合計とそれぞれについて、古典的なquirksmode関数に基づく累積位置関数を使用しています。offsetTopoffsetLeftoffsetParent

ただし、offsetParentFirefoxに関心のある要素がないという問題が発生しています。IEoffsetParentには存在しますが、offsetTop合計offsetLeftが0になるため、Firefoxと同じ問題が発生します。

画面上ではっきりと表示されて使用できる要素に、がない原因は何offsetParentですか？または、より実際的には、その下にドロップダウンを配置するために、この要素の位置をどのように見つけることができますか？

編集：これの1つの特定のインスタンスを再現する方法は次のとおりです（現在受け入れられている回答では解決されていません）：

  1. StackOverflowのホームページを開きます。

  2. Webブラウザ（Chromev21など）のコンソールで次のコードを実行します。

    var e = document.querySelector('div');
console.log(e);
// <div id="notify-container"></div>
do{
  var s = getComputedStyle(e);
  console.log(e.tagName,s.display,s.visibility,s.position,e.offsetParent);
} while(e=e.parentElement)
// DIV block visible fixed null
// BODY block visible static null
// HTML block visible static null

なぜoffsetParentその要素のnullですか？

4

7 に答える 7

46

、、およびの値の一意の組み合わせを使用して2,304 div のテストを行い、これらの値のそれぞれの一意の組み合わせ内にネストし、次のことを決定しました。positiondisplayvisibility


の子孫であるそうでなければ有効な要素は、次の場合に値<body>
を持ちません:offsetParent

  • 要素にはposition:fixed( Webkit および IE9 )
  • 要素にはdisplay:none ( Webkit と FF )があります
  • すべての祖先が持っていますdisplay:none ( Webkit と FF )

また、親を持たない要素、またはページ自体に追加されていない (ページの の子孫ではない) 要素に<body>もoffsetParent==null.

于 2012-07-24T21:33:54.160 に答える
17

ドキュメントの読み込みが完了していない場合、offsetParent は null になる可能性があります

于 2008-11-20T18:46:06.117 に答える
13

https://developer.mozilla.org/en/DOM/element.offsetParent

要素の style.display が「none」に設定されている場合、offsetParent は null を返します。

于 2010-10-06T22:50:14.103 に答える
4

offsetParent要素オブジェクトがまだ DOM に追加されていない場合は null を返します。

于 2011-01-15T20:40:08.930 に答える
4

これは古い質問ですが、別のケースがあります。DOM を操作すると、IE6 および IE7 では、offsetParent が null になる可能性があります。

参照: IE 6/7 - offsetParent (Javascript) にアクセスするときの「不明なエラー」

于 2010-04-27T23:18:39.823 に答える
0

要素のすぐ左にある兄弟が非表示になっているときに、この問題が発生しました。

<div id="parent">
  <div id="element1">some stuff</div>
  <div id="element2" style="display: none">some hidden stuff</div>
  <div id="element3">child whose offset we want</div>
</div>

element3自体が表示されていても、 element3のoffsetParentがnullであり、親が表示されている場合があります。

私はFirefox3.6とChrome5が薄いのを見てきました。これは、 element3のgetBoundingClientRect（）関数にも影響を与えるようです。これは、他の多くの場合に機能するため、非常に面倒です。

于 2010-07-22T20:24:25.993 に答える