Подтвердить что ты не робот

Что сделало бы offsetParent null?

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

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

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

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

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

4b9b3361

Ответ 1

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

Ответ 2

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

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

  • Элемент имеет position:fixed (Webkit и IE9)
  • Элемент имеет display:none (Webkit и FF)
  • У любого предка есть display:none (Webkit и FF)

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

Ответ 5

offsetParent вернет значение null, если объект элемента еще не добавлен в DOM.

Ответ 6

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

<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 имеет значение null, хотя сам объект element3 отображается, а parent.

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