DHTML 中的絕對定位
2024-09-06 12:44:28
供稿：網友
下面的東西顯示了在復雜的情況下，
怎樣最好地在一個Element的旁邊顯示某個DIV。
當然，你可以滾動窗口，使這個按紐靠窗口的 左/上/右/下 的情況，觀察菜單的彈出方位。
全部代碼:
代碼如下:<table border=1 cellpadding=8 cellspacing=0>
<tr><td>table1</td><td>table1</td></tr>
<tr><td>table1</td><td>
<div id=div1 style='position:absolute;background-color:wheat;padding:4px;'>
div1 start
<div id=div1button style='border:outset 2px;background-color:threedface;color:red;font-weight:bold;cursor:hand;padding:4px;'>
ClickMe
</div>
div1 end
</div>
</td></tr>
</table>
<div style='height:100px'>-</div>
<table border=1 cellpadding=8 cellspacing=0>
<tr><td>table2</td><td>table2</td></tr>
<tr><td>table2</td><td>
<div id=div2 style='position:relative;left:24px;background-color:wheat;'>
div2 start
<div id=div2menu style='display:none;position:absolute;background-color:lightgrey;height:200px;width:120px;border:outset 1px;padding:4px'>
div2menu<br>
div2menu<br>
div2menu<br>
div2menu<br>
div2menu<br>
</div>
div2 end
</div>
</td></tr>
</table>
<script language='jscript'>
//get the position of a element ( by the scroll offset )
function LostinetWebGetScrollPostion(e)
{
var b=e.document.body;
if(e==b)return {left:0,top:0};
with(e.getBoundingClientRect())
{
return {left:b.scrollLeft+left,top:b.scrollTop+top};
}
}
//get the position of a element ( by the client offset )
function LostinetWebGetClientPosition(e)
{
var b=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};
}
}
//get absolute or relative parent
function LostinetWebGetStandParent(e)
{
for(var p=e.parentElement;p!=null;p=p.parentElement)
