Почему OffsetParent возвращает body, а не table?

Question

[Theory Theory]

<table>
			<div id="element">
				Lorem 
			</div>
	</table>

console.log(element.offsetParent); // body

Разве не table ближе?

Comments

[Роман]

Потому что тег <table></table> не может содержать тег <div></div>, а может только теги

<caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

(ссылка)

И в результате вы получаете это:

Answer 1

[dicem]

Свойство offsetParent содержит первый родительский элемент у которого CSS свойство position не равно static, либо body если его нет. То есть родителя относительно которого происходит позиционирование элемента.

Ну и собсна

The HTMLElement.offsetParent read-only property returns a reference to the element which is the closest (nearest in the containment hierarchy) positioned ancestor element. If there is no positioned ancestor element, the nearest ancestor td, th, table will be returned, or the body if there are no ancestor table elements either.

https://developer.mozilla.org/en-US/docs/Web/API/H...

Пример:

Answer 2

[Александр]

А что Вы хотите получить, ближайший table? Тогда element.closest('table');

Answer 3

[Александр Черемхин]

Не корректно помещать div внутрь table. Попробуйте так

<table>
   <tr> 
       <td>
          <div id="element">
              Lorem 
          </div>
       </td>
    </tr>
</table>