<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title><style type="text/css">
html{padding:100px;margin:0;background:#fff;}
body{padding:100px;margin:0;background:#f1f1f1;height:600px;}#div{background:#039;width:200px;height:200px;position:absolute;top:10px;left:10px;}
</style></head>
<body><div id="div"></div><script type="text/javascript">alert(document.getElementById("div").offsetParent);</script>
</body>
</html>
为什么页面上的div元素的offsetParent是body节点,但是在呈现的时候,定位元素却是 html节点?
解决方案 »
- ie8下window.open问题
- js居然自己四舍五入?
- javascript代码兼容浏览器问题!谢谢!
- $.get问题,高手请进
- 关于打印的问题:http://lucky.myrice.com/print.htm这个东西还是不错的,可是怎样取消打印按钮啊?
- 在Input输入框的onkeypress事件中如何获取当前输入的汉字值
- document.all是代表什么?它有什么作用?
- 在用户关闭浏览器时(点击X),我该怎么铺获这个操作,然后进行相关的数据库操作?
- 为什么我用window.open()打开的窗口有时候页面显示不完整?
- extjs中create一个window,里面一个panel加html然后加入buttons就报错了。
- javascript cookie的一些疑问
- 问一个关于Extjs 有一个配置项proxy的问提
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. 这个解释有些模糊。我们再来看看他的res
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"
------------------------------------------------------
博客园找的,希望有用.
你说定位是不是postion:absolute,如果父级有postion它是以父级为原点,没有就以页面左上角为原点,你可以在body上再加个postion看看效果。