DHTML 中的绝对定位。 - 迷失网络

<< 两年前写的 C++ 的 JString | Home | 对于微软拼音2003，我的看法。 >>

下面的东西显示了在复杂的情况下，
怎样最好地在一个Element的旁边显示某个DIV。

要测试它，请点 ClickMe

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

全部代码:

<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>
&nbsp;</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>
&nbsp;</td></tr>
</table>

document.attachEvent('onclick',function f()
{
 if(div1button.contains(event.srcElement))return;
 if(div2menu.contains(event.srcElement))return;
 div2menu.runtimeStyle.display='none';
});
function div1button.onclick()
{
 div2menu.runtimeStyle.display='block';
 var pos=LostinetWebCalcPosition(div2menu,div1button);
 pos.top+=div1button.offsetHeight;
 LostinetWebAdjustMirror(div2menu,div1button,pos);
 div2menu.runtimeStyle.left=pos.left;
 div2menu.runtimeStyle.top=pos.top;
}
</script>

打印 | posted on Friday, June 18, 2004 4:42 PM | Filed Under [ Browser ] | 收藏本页 (百度搜藏)(QQ书签)(Live收藏)(Google书签)(Yahoo书签)(新浪ViVi)(搜狐网摘)(365Key网摘)(天极网摘)(博采网摘)(和讯网摘)

Feedbacks

# 回复: DHTML 中的绝对定位。

这个定位仍然不够完美。
存在偏差的原因应该在border,padding,margin这些东西上。

6/18/2004 4:39 PM | Lostinet

# 回复: DHTML 中的绝对定位。

能不能覆盖<select.../>

6/18/2004 4:43 PM | 害尔扑

# 回复: DHTML 中的绝对定位。

这不是定位的问题。

要覆盖 select 的话，可以选择把内容放到一个IFRAME中显示出来。
这样 IFRAME 就能覆盖 select 了。

6/18/2004 4:45 PM | Lostinet

# 回复: DHTML 中的绝对定位。

建议多读读标准

ms做的一些扩展，拿到firefox,opera等等浏览器上，就惨不忍睹了，有很多ms的扩展，用标准的方法也能实现，而且就不依赖于浏览器了。

对那些不能实现的，只要放弃一些看似花哨，但是实际没有用的东西，你做的网页就可以做到对世界上每一个用户都是友好的。

gmail的用户界面不好么？但是人家高度兼容所有的浏览器，看着虽然不花哨，但是非常的方便快捷，那才是技术的体现。

6/18/2004 6:24 PM | tinyfool