DHTML 中的絕對定位

2024-09-06 12:44:28

字體：大中小

供稿：網(wǎng)友

下面的東西顯示了在復(fù)雜的情況下，
怎樣最好地在一個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)

上一篇：用js得到網(wǎng)頁中所有的div的id

下一篇：關(guān)于IE只能嵌套27層表格的說法證明