关于offset定位

首先看代码<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{
padding: 0px;
margin: 0px;
font-family:"宋体";
font-size: 12px;
}#headList {
background: #FFFFFF url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat scroll 0 -200px;
border: 1px solid #FFA930;
cursor: pointer;
display:block;
height: 17px;
line-height: 17px;
overflow:hidden;
padding: 0 18px 0 0;
text-align: center;
width:79px;
}#bodyList {
background: #FFFCF5 url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x scroll 0 -150px;
border: 1px solid #FDAD34;
opacity: 0.9;
overflow: hidden;
padding: 5px 0;
position: relative;
width: 97px;
display: none;
z-index: 100;
}ul, ol{
list-style-type: none;
}#bodyList li a{
display: block;
height: 20px;
margin: 0 5px;
overflow: hidden;
padding-left: 12px;
line-height: 22px;
text-align: left;
outline: none;
hid-focus: expression(this.hidFocus = true);
}#bodyList li a:hover, #bodyList li a:active {
background: #FEF0E2 none repeat scroll 0 0;
text-decoration: none;
}#bodyList li a:link, #bodyList li a:visited{
color: #000000;
text-decoration: none;
}
</style></head><body>
<span id="headList"></span>
<ul id="bodyList">
<li><a href="javascript:void(0);">one</a></li>
<li><a href="javascript:void(0);">two</a></li>
<li><a href="javascript:void(0);">three</a></li>
<li><a href="javascript:void(0);">four</a></li>
<li><a href="javascript:void(0);">five</a></li>
</ul>
<script type="text/javascript">
var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };

var CurrentStyle = function(element){
return element.currentStyle || element.ownerDocument.defaultView.getComputedStyle(element, null);
}

var absPostion = function(element){
var iTop = iLeft = 0;
do{
iTop += element.offsetTop;
iLeft += element.offsetLeft;
}
while(element = element.offsetParent)
return {'x':iLeft,'y':iTop};
}

$("headList").onclick = function(){
$("bodyList").style.display = "block";
$("bodyList").style.left = absPostion(this).x + "px";
$("bodyList").style.top = (absPostion(this).y + this.offsetHeight) + "px";
}</script></body>
</html>
我的要求就是点击下拉头然后弹出的下拉体位置定位在头的正下方
希望兄弟们给看下然后给讲解下我那个absPosition函数的应用环境我以前用过都没问题
这次不知道怎么出问题了估计是我控件的position设置问题要求兼容IE6-8和FF

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

定位没问题不过LZ用的是相对定位
position: relative;
就不需要那个this.offsetHeight)
在就是给ul加个 margin:0px;最好用绝对定位  不然后面问题又回多多的getBoundingClientRect()也可以定位   也兼容 ie ff  lZ可以尝试着玩玩！~<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{
    padding: 0px;
    margin: 0px;
    font-family:"宋体";
    font-size: 12px;
}#headList {
    background: #FFFFFF url(http://i2.sinaimg.cn/dy/deco/2008/1121/sinahome_0803_ws_002_new.gif) no-repeat scroll 0 -200px;
    border: 1px solid #FFA930;
    cursor: pointer;
    display:block;
    height: 17px;
    line-height: 17px;
    overflow:hidden;
    padding: 0 18px 0 0;
    text-align: center;
    width:79px;
}#bodyList {
    background: #FFFCF5 url(http://i1.sinaimg.cn/home/deco/2008/0329/sinahome_0803_ws_001.gif) repeat-x scroll 0 -150px;
    border: 1px solid #FDAD34;
    opacity: 0.9;
    overflow: hidden;
    padding: 5px 0;
    position: relative;
    width: 97px;
margin:0px;
    display: none;
    z-index: 100;
}ul, ol{
    list-style-type: none;
}#bodyList li a{
    display: block;
    height: 20px;
    margin: 0 5px;
    overflow: hidden;
    padding-left: 12px;
    line-height: 22px;
    text-align: left;
    outline: none;
    hid-focus: expression(this.hidFocus = true);
}#bodyList li a:hover, #bodyList li a:active {
    background: #FEF0E2 none repeat scroll 0 0;
    text-decoration: none;
}#bodyList li a:link, #bodyList li a:visited{
    color: #000000;
    text-decoration: none;
}
</style></head><body>
<span id="headList"></span>
<ul id="bodyList">
<li><a href="javascript:void(0);">one</a></li>
<li><a href="javascript:void(0);">two</a></li>
<li><a href="javascript:void(0);">three</a></li>
<li><a href="javascript:void(0);">four</a></li>
<li><a href="javascript:void(0);">five</a></li>
</ul>
<script type="text/javascript">
var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };

var CurrentStyle = function(element){
     return element.currentStyle || element.ownerDocument.defaultView.getComputedStyle(element, null);
}

var absPostion = function(element){
     var iTop = iLeft = 0;
    do{
        iTop += element.offsetTop;
        iLeft += element.offsetLeft;
    }
    while(element = element.offsetParent)
    return {'x':iLeft,'y':iTop};
}

$("headList").onclick = function(){
    $("bodyList").style.display = "block";
    $("bodyList").style.left = absPostion(this).x + "px";
    $("bodyList").style.top = (absPostion(this).y ) + "px";
}</script></body>
</html>
谢谢wtcsy 我一开始也是用的absolute没想到是那个margin搞得为什么默认会有个margin呢?
还有你能给我稍微介绍下getBoundingClientRect()么?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>editor</title></head>
<body style="font-size:12px;">
<div id='ss' style=" width:100px; height:100px; background-color:#006600; position:absolute; left:400px; top:300px;">
</div>
<script>
function p(o){
var pos  = o.getBoundingClientRect();
var root = o.ownerDocument || o.document;
return {x:pos.left+root.documentElement.scrollLeft,y:pos.top+root.documentElement.scrollTop};  //从风之石的东西中看到的
}
alert(p(document.getElementById("ss")).x)
alert(p(document.getElementById("ss")).y)
//ie body的border宽度为2   51js一直都流传着这个传说
</script>
</body>
</html>
建议使用 jQuery 的 dimensions 插件.