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

Я пытаюсь сделать позиционирование в 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 ответов

Решение

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

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

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

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

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

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

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

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

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

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

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

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

<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 элемента 3 равен нулю, хотя сам элемент 3 является видимым, а родительский элемент видимым.

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

Другие вопросы по тегам