理解offsetparent

理解offsetparentoffsetParent 是指元素最近的定位 relative absolute 祖先元素 如果没有祖先元素是定位的话 会指向 body 元素 作用 元素的偏移量 offsetLeft offsetTop 就是以这个祖先元素为参考点的 1 在 DOM 结构中该元素的上面没有定位元素 aavaraa document get

offsetParent:是指元素最近的定位(relative,absolute)祖先元素,如果没有祖先元素是定位的话,会指向body元素

       作用:元素的偏移量(offsetLeft,offsetTop)就是以这个祖先元素为参考点的

1.在DOM结构中该元素的上面没有定位元素:

  

aa

var aa = document.getElementBYId(“aa”).

aa.offsetParent.tagName  = BODY

如果aa的父元素加了个margin-left的话,在IE6中aa的offsetLeft=0,其它浏览器是margin-left值(IE6为啥呢。。。)

2.aa的父元素有定位样式

aa.offsetParent.tagName  = DIV

aa.offsetLeft = 0(没给aa加偏移)

3.aa的父父元素有定位样式,aa的父元素没有定位样式,参考物就是aa的父父元素

td的offsetParent是TABLE,不管table是否有定属性

td里面的元素的offsetParent为第一个定位的parents元素,如果没有定位元素呢,分为三种

1.如果该元素没有定位时:TD

2.如果该元素有定位,table都没有定位的话,IE6中=HTML,FF,IE8=BODY

3.如果该元素和table都定位的话:TABLE


 以下是我个人总结的规律 
 
 在td中的元素会把第一个绝对/相对定位的hierarchy parent当作offsetParent,如果没有找到需要分三种情况讨论 
 
   一,如果该元素没有绝对/相对定位,则会把td当作offsetParent 
 
   二,如果该元素绝对/相对定位并且table没有绝对/相对定位,则会把body当作offsetParent
 
   三,如果该元素绝对/相对定位并且table绝对/相对定位,则会把table当作offsetParent 
 
 看一下示例代码
 
 1.
 













  

    
  
 

parentdiv

sondiv


 
 
 运行结果parentdiv.offsetParent.tagName IS “body”
 
                 sondiv.offsetParent.id     IS ”parentdiv” 
 
 2.
 

  

    

  

 

parentdiv

sondiv

 
 
 运行结果parentdiv.offsetParent.tagName IS “body” 
 
                 sondiv.offsetParent.id     IS ”parentdiv”
 
 3.
 

  

    

  

 

parentdiv

sondiv

 
 
 
 运行结果parentdiv.offsetParent.tagName IS “TD” 
 
                 sondiv.offsetParent.tagName    IS ”body”
 
 4.
 

  

    

  

 

parentdiv

sondiv

 
 
 
 运行结果parentdiv.offsetParent.tagName IS “TD” 
 
                 sondiv.offsetParent.tagName    IS ”TD”
 
 5.
 

  

    

  

 

parentdiv

sondiv

 
















































补充一些如果table外层还有一层div,如果属性有overflow:auto,则div默认是定位的,如果td中的元素是定位的 ,那么td.offsetParent.tagName是div






版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/216879.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月18日 上午10:51
下一篇 2026年3月18日 上午10:52


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号