包含offsetparent的词条
解决获取offsetParent为null,offsetTop为0的问题
如果获取该元素的offsetParent为null,一般就两种情况:
如果 offsetTop 为0，那么大概率也是因为上面两种原因造成的
每次获取 offsetTop 为0，找半天问题，最后都定位了该元素的父级元素或者祖先元素为 display:none ,所以这次记录下来，避免下次再出现这种问题
js parentElement和offsetParent之间的区别
首先是 parentElement 属性，这个属性好理解，就是在 DOM 层次结构定义的上下级关系，如果元素A包含元素B，那么元素B就可以通过
parentElement 属性来获取元素A。
这里主要说的是 offsetParent 属性，这个属性在 MSDN
的文档中也没有解释清楚，这就让人更难理解这个属性。 这几天在网上找了些资料看看，再加上自己的一些测试，对此属性有了那么一点的了解，在这里总结一下。
要明白 offsetParent 属性，要先明白“已定位元素” 这个名字，所谓“已定位元素”就是指给元素设置了 position 属性的样式，并且
position 样式属性的值等于 absolute、relative、fixed 之一的元素。
在使用 offsetParent
属性获取父级对象时有以下两种情况：
1、元素本身已经定位
如果元素本身已经定位，那么 offsetParent
属性返回此元素已定位父级元素，如没有已定位的父级元素，则返回 BODY 对象，例如：
复制代码
代码如下:
body
p
div
span id="obj1" style="position:absolute"/span
/div
div id="pObj1" style="position:absolute"
span id="obj2" style="position:absolute"/span
/div
/p
/body
obj1.offsetParent 返回 BODY 对象
obj2.offsetParent 返回
pObj1 对象
2、元素没有定位
如果元素没有定位， offsetParent
不但会找已经定位的父级元素而且还会查找类型为 TD 和 TABLE 的父级元素，只要找到这三种父级元素的其中任何一种元素将返回此元素，否则返回 BODY
对象，例如：
复制代码
代码如下:
table width="500" border="0"
tr
td id="td1"
div id="pObj1"
span
id="obj1"/span
/div
/td
/tr
tr
td
div id="pObj2"
style="position:relative"
span id="obj2"/span
/div
/td
/tr
/table
obj1.offsetParent 返回 td1 对象
obj2.offsetParent 返回 pObj2
对象
在 DOM 元素的属性里，还有 parentNode 这个属性，其实这个属性跟 parentElement
属性是一个意思，parentElement 属性是 IE 特有的，W3C 标准是使用 parentNode 属性，还有 children 和
childNodes, children 是 IE 特有的， childNodes 被其他浏览支持。
js的offset什么意思
offset有offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight；
offsetParent：当前容器的父级并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素
offsetWidth：元素的可视宽度，包括元素的边框(border)，水平padding，元素本身宽度
offsetLeft:元素的边框的外边缘距离与已定位的父容器（offsetparent）的左边距离（不包括元素的边框和父容器的边框）
top:expression(this.offsetParent.scrollTop); 不是有效top属性
expression不是CSS标准，只有IE支持，所以，按照标准验证的话，是会提示不是有效top属性的
scrollTop与offsetTop有什么区别？
scrollTop是指某个可滚动区块向下滚动的距离，offsetTop则是元素的上边框与父元素的上边框的绝对距离。
1.offsetTop ? ? :
当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.
2.offsetLeft ? ?:
当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.
3.offsetWidth ? :
当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值
4.offsetHeight :
与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值
5.offsetParent ?:
当前对象的上级层对象.
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.
利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置．
6.scrollLeft ? ?:
对象的最左边到对象在当前窗口显示的范围内的左边的距离．
即是在出现了横向滚动条的情况下，滚动条拉动的距离．
7.scrollTop
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．
即是在出现了纵向滚动条的情况下，滚动条拉动的距离．
8.测试offsetTop和scrollTop的html代码
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
HTML
HEAD
TITLE New Document /TITLE
SCRIPT LANGUAGE="JavaScript"
!--
function test(){
var oIframe = document.getElementById("div1");
alert(oIframe.offsetTop);
alert(oIframe.scrollTop);
}
//--
/SCRIPT
/HEAD
BODY style="border:1px red solid;padding:20px;margin:0px;"
div id="div1" style="border:1px blue solid;height:400px;width:200px;overflow:auto"
iframe id="iframe1" src="" width="400" height="500" style="border:1px red solid;" scrolling="no"
/iframe
/div
input type="button" value="OK" onclick="test()"/
/BODY
/HTML
script type="text/javascript" /script
jquery怎么设置滚动条的位置
offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
.offset()方法可以让我们重新设置元素的位置。这个元素的位置是相对于document对象的。如果对象原先的position样式属性是 static的话，会被改成relative来实现重定位。
position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
/ Get *real* offsetParent
var offsetParent = this.offsetParent(),
// Get correct offsets
offset = this.offset(),
parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ? { top: 0, left: 0 } : offsetParent.offset();
// Subtract element margins
// note: when an element has margin: auto the offsetLeft and marginLeft
// are the same in Safari causing offset.left to incorrectly be 0
offset.top -= num( this, ’marginTop’ );
offset.left -= num( this, ’marginLeft’ );
// Add offsetParent borders
parentOffset.top += num( offsetParent, ’borderTopWidth’ );
parentOffset.left += num( offsetParent, ’borderLeftWidth’ );
// Subtract the two offsets
results = {
top: offset.top - parentOffset.top,
left: offset.left - parentOffset.left
};使用position()方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。
使用position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移
使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移