下面的东西显示了在复杂的情况下，

怎样最好地在一个Element的旁边显示某个DIV。

当然，你可以滚动窗口，使这个按纽靠窗口的左/上/右/下的情况，观察菜单的弹出方位。

全部代码:

复制代码 代码如下:<tableborder=1cellpadding=8cellspacing=0>

<tr><td>table1</td><td>table1</td></tr>

<tr><td>table1</td><td>

<divid=div1style='position:absolute;background-color:wheat;padding:4px;'>

div1start

<divid=div1buttonstyle='border:outset2px;background-color:threedface;color:red;font-weight:bold;cursor:hand;padding:4px;'>

ClickMe

</div>

div1end

</div>

</td></tr>

</table>

<divstyle='height:100px'>-</div>

<tableborder=1cellpadding=8cellspacing=0>

<tr><td>table2</td><td>table2</td></tr>

<tr><td>table2</td><td>

<divid=div2style='position:relative;left:24px;background-color:wheat;'>

div2start

<divid=div2menustyle='display:none;position:absolute;background-color:lightgrey;height:200px;width:120px;border:outset1px;padding:4px'>

div2menu<br>

div2menu<br>

div2menu<br>

div2menu<br>

div2menu<br>

</div>

div2end

</div>

</td></tr>

</table>

<scriptlanguage='jscript'>

//getthepositionofaelement(bythescrolloffset)

functionLostinetWebGetScrollPostion(e)

{

varb=e.document.body;

if(e==b)return{left:0,top:0};

with(e.getBoundingClientRect())

{

return{left:b.scrollLeft+left,top:b.scrollTop+top};

}

}

//getthepositionofaelement(bytheclientoffset)

functionLostinetWebGetClientPosition(e)

{

varb=e.document.body;

if(e==b)return{left:-b.scrollLeft,top:-b.scrollTop};

with(e.getBoundingClientRect())

{

return{left:left-b.clientLeft,top:top-b.clientTop};

}

}

//getabsoluteorrelativeparent

functionLostinetWebGetStandParent(e)

{

for(varp=e.parentElement;p!=null;p=p.parentElement)

{

varsp=p.currentStyle.position;

if(sp=='absolute'||sp=='relative')

returnp;

}

returne.document.body;

}

//calcthepositionoffloatethatrelativetoe

functionLostinetWebCalcPosition(floate,e)

{

varepos=LostinetWebGetScrollPostion(e);

varspos=LostinetWebGetScrollPostion(LostinetWebGetStandParent(floate));

vars=LostinetWebGetStandParent(floate);

return{left:epos.left-spos.left-s.clientLeft,top:epos.top-spos.top-s.clientTop};

}

//getthebestpositiontoputthefloate

functionLostinetWebAdjustMirror(floate,e,pos)

{

//c:Client,f:floate,e:e,p:floate'sStandParent,m:Mirror

varcw=e.document.body.clientWidth;

varch=e.document.body.clientHeight;

varfw=floate.offsetWidth;

varfh=floate.offsetHeight;

varew=e.offsetWidth;

vareh=e.offsetHeight;

varecpos=LostinetWebGetClientPosition(e);

varempos={left:ecpos.left+ew/2,top:ecpos.top+eh/2};

varpcpos=LostinetWebGetClientPosition(LostinetWebGetStandParent(floate));

varfcpos=LostinetWebGetClientPosition(floate);

varfmpos={left:pcpos.left+pos.left+fw/2,top:pcpos.top+pos.top+fh/2};

//left<-->right

if((fmpos.left<empos.left)?((fmpos.left-fw/2<0)&&((empos.left*2-fmpos.left)+fw/2<=cw)):((fmpos.left+fw/2>cw)&&((empos.left*2-fmpos.left)-fw/2>=0)))

fmpos.left=empos.left*2-fmpos.left;

//top<-->bottom

if((fmpos.top<empos.top)?((fmpos.top-fh/2<0)&&((empos.top*2-fmpos.top)+fh/2<=ch)):((fmpos.top+fh/2>ch)&&((empos.top*2-fmpos.top)-fh/2>=0)))

fmpos.top=empos.top*2-fmpos.top;

pos.left=fmpos.left-pcpos.left-fw/2;

pos.top=fmpos.top-pcpos.top-fh/2;

}

document.attachEvent('onclick',functionf()

{

if(div1button.contains(event.srcElement))return;

if(div2menu.contains(event.srcElement))return;

div2menu.runtimeStyle.display='none';

});

functiondiv1button.onclick()

{

div2menu.runtimeStyle.display='block';

varpos=LostinetWebCalcPosition(div2menu,div1button);

pos.top+=div1button.offsetHeight;

LostinetWebAdjustMirror(div2menu,div1button,pos);

div2menu.runtimeStyle.left=pos.left;

div2menu.runtimeStyle.top=pos.top;

}

</script>

【DHTML 中的绝对定位】相关文章：

★ Javascript 字符串模板的简单实现

★ 让广告代码不再影响你的网页加载速度

★ js输入中文效果

★ JS获取当前脚本文件的绝对路径

★ 在JS中操作时间之getUTCMilliseconds()方法的使用

★ JS、HTML代码运行工具

★ 深入理解JavaScript中的对象

★ JS中的Replace方法使用经验分享

★ JSON与XML优缺点对比分析

★ JavaScript中的unshift()方法的使用