offsetParent和parentElement的区别
parentElement 在msdn的解释是Retrieves the parent object in the object hierarchy.
而offsetParent在msdn的解释是Retrieves a reference to the container object that defines the offsetTop and offsetLeft properties of the object. 这个解释有些模糊。我们再来看看他的remarks
Most of the time the offsetParent property returns the body object.
大多说offsetParent返回body
Note In Microsoft® Internet Explorer 5, the offsetParent property returns the TABLE object for the TD object; in Microsoft® Internet Explorer 4.0 it returns the TR object. You can use the parentElement property to retrieve the immediate container of the table cell.
对于IE 5.0以上，TD的offsetParent返回Table。
但是msdn并没有讨论在页面td元素中存在绝对/相对定位时offsetParent的值。
以下是我个人总结的规律
在td中的元素会把第一个绝对／相对定位的hierarchy parent当作offsetParent，如果没有找到需要分三种情况讨论
一，如果该元素没有绝对／相对定位，则会把td当作offsetParent
二，如果该元素绝对／相对定位并且table没有绝对／相对定位，则会把body当作offsetParent
三，如果该元素绝对／相对定位并且table绝对／相对定位，则会把table当作offsetParent
看一下示例代码
1.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv">sondiv</div></div></TD>
</TR>
</TABLE>
运行结果parentdiv.offsetParent.tagName IS "body"
sondiv.offsetParent.id IS "parentdiv"
2.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
</TR>
</TABLE>
运行结果parentdiv.offsetParent.tagName IS "body"
sondiv.offsetParent.id IS "parentdiv"
3.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
</TR>
</TABLE>
运行结果parentdiv.offsetParent.tagName IS "TD"
sondiv.offsetParent.tagName IS "body"
4.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv">sondiv</div></div></TD>
</TR>
</TABLE>
运行结果parentdiv.offsetParent.tagName IS "TD"
sondiv.offsetParent.tagName IS "TD"
5.<BODY >
<TABLE BORDER=1 ALIGN=right style="position:relative">
<TR>
<TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
</TR>
</TABLE>
运行结果parentdiv.offsetParent.tagName IS "Table"
sondiv.offsetParent.tagName IS "parentdiv"
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 2025年我用 Compose 写了一个 Todo App
· 张高兴的大模型开发实战：（一）使用 Selenium 进行网页爬虫