Что бы сделать offsetParent нулевым? - PullRequest
Новая
       12

Что бы сделать offsetParent нулевым?

13 голосов
/ 20 ноября 2008

Я пытаюсь сделать позиционирование в JavaScript. Я использую накопительную функцию положения, основанную на классической функции quirksmode , которая суммирует offsetTop и offsetLeft для каждого offsetParent до верхнего узла.

Однако я сталкиваюсь с проблемой, когда интересующий меня элемент не имеет offsetParent в Firefox. В IE offsetParent существует, но offsetTop и offsetLeft все суммируют до 0, поэтому в действительности имеет ту же проблему, что и в Firefox.

Что может привести к тому, что элемент, который хорошо виден и пригоден для использования на экране, не имеет offsetParent? Или, на практике, как я могу найти положение этого элемента, чтобы разместить под ним раскрывающийся список?

Редактировать : Вот как воспроизвести один конкретный случай этого (не решенный в настоящее время принятым ответом):

  1. Открыть домашнюю страницу переполнения стека .

  2. Запустите следующий код в консоли веб-браузера (например, 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?

Ответы [ 6 ]

40 голосов
/ 25 июля 2012

Я сделал тест с 2304 делениями с уникальными комбинациями значений для position, display и visibility, вложенными в уникальные комбинации каждого из этих значений, и определил, что

иначе действительный элемент
это потомок <body>
не будет иметь значения offsetParent, если:

  • Элемент имеет position:fixed ( Webkit и IE9 )
  • Элемент имеет display:none ( Webkit и FF )
  • Любой предок имеет display:none ( Webkit и FF )

Также разумно ожидать, что элемент, у которого нет родителя или который не добавлен к самой странице (не является потомком <body> страницы), также будет иметь offsetParent==null .

15 голосов
/ 20 ноября 2008

Если документ не закончил загрузку, тогда offsetParent может быть нулевым

13 голосов
/ 07 октября 2010

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

offsetParent возвращает значение NULL, если для элемента style.display установлено значение «none».

4 голосов
/ 15 января 2011

offsetParent вернет ноль, если ваш элемент элемента еще не добавлен в DOM.

4 голосов
/ 28 апреля 2010

Это старый вопрос, но у меня есть другой случай. Если вы манипулируете DOM, вы можете получить нулевое offsetParent - в IE6 и IE7.

См .: IE 6/7 - «Неуказанная ошибка» при доступе к offsetParent (Javascript)

0 голосов
/ 23 июля 2010

Я столкнулся с этой проблемой, когда брат или сестра слева от элемента скрыты: 

<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>

Я сталкивался со случаем, когда offsetParent из element3 равен нулю, хотя element3 сам по себе является видимым, а parent виден.

Я видел тонкие Firefox 3.6 и Chrome 5. Похоже, что это также влияет на функцию getBoundingClientRect () в element3 , что действительно раздражает, так как работает в много других случаев!

...