关于在javascript中,定位层的有关问题
日期：2014-05-18 浏览次数：20426 次
关于在javascript中,定位层的问题
下面代码中,我要把层定位在单元格"d1"的位置?但程序没得反映得,结果层还是显示在表格最下面.为什么.要如何定位层呢?
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<link href="../Include/Style/Style.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
function showpan()
{
var x=document.getElementById("d1").style.left;
var y=document.getElementById("d1").style.top;
document.getElementById("univlist").style.left =x;
document.getElementById("univlist").style.top = y;
document.getElementById("univlist").style.display = "block";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table cellspacing="0" cellpadding="0" width="100%" border="1">
<tr>
<td height="60"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td id="d1"><input type="text" id="tb" onclick="showpan()"/></td>
</tr>
<tr>
<td style="height:100px" colspan="2"> </td>
</tr>
</table>
<DIV id="univlist" style="position:relative;z-index:30;display:none;">
<LI class="active" id="c_0"><A
href="http://reg.xiaonei.com/register.do#">中国</A> </LI>
<LI id="c_7"><A o
href="http://reg.xiaonei.com/register.do#">美国</A> </LI>
<LI id="c_6"><A
href="http://reg.xiaonei.com/register.do#">加拿大</A> </LI>
<LI id="c_5"><A
href="http://reg.xiaonei.com/register.do#">英国</A> </LI>
<LI id="c_1"><A
href="http://reg.xiaonei.com/register.do#">澳大利亚</A> </LI>
<LI id="c_2"><A
href="http://reg.xiaonei.com/register.do#">法国</A> </LI>
<LI id="c_8"><A
href="http://reg.xiaonei.com/register.do#">德国</A> </LI>
<LI id="c_4"><A
href="http://reg.xiaonei.com/register.do#">新西兰</A> </LI>
<LI id="c_3"><A
href="http://reg.xiaonei.com/register.do#">新加坡</A> </LI></UL>
</DIV>
</form>
</body>
</html>
------解决方案--------------------
style="position:relative;z-index:30;display:none;">
改为绝对定位
position:absolute;
------解决方案--------------------
position:absolute;
下面代码中,我要把层定位在单元格"d1"的位置?但程序没得反映得,结果层还是显示在表格最下面.为什么.要如何定位层呢?
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<link href="../Include/Style/Style.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
function showpan()
{
var x=document.getElementById("d1").style.left;
var y=document.getElementById("d1").style.top;
document.getElementById("univlist").style.left =x;
document.getElementById("univlist").style.top = y;
document.getElementById("univlist").style.display = "block";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table cellspacing="0" cellpadding="0" width="100%" border="1">
<tr>
<td height="60"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td id="d1"><input type="text" id="tb" onclick="showpan()"/></td>
</tr>
<tr>
<td style="height:100px" colspan="2"> </td>
</tr>
</table>
<DIV id="univlist" style="position:relative;z-index:30;display:none;">
<LI class="active" id="c_0"><A
href="http://reg.xiaonei.com/register.do#">中国</A> </LI>
<LI id="c_7"><A o
href="http://reg.xiaonei.com/register.do#">美国</A> </LI>
<LI id="c_6"><A
href="http://reg.xiaonei.com/register.do#">加拿大</A> </LI>
<LI id="c_5"><A
href="http://reg.xiaonei.com/register.do#">英国</A> </LI>
<LI id="c_1"><A
href="http://reg.xiaonei.com/register.do#">澳大利亚</A> </LI>
<LI id="c_2"><A
href="http://reg.xiaonei.com/register.do#">法国</A> </LI>
<LI id="c_8"><A
href="http://reg.xiaonei.com/register.do#">德国</A> </LI>
<LI id="c_4"><A
href="http://reg.xiaonei.com/register.do#">新西兰</A> </LI>
<LI id="c_3"><A
href="http://reg.xiaonei.com/register.do#">新加坡</A> </LI></UL>
</DIV>
</form>
</body>
</html>
------解决方案--------------------
style="position:relative;z-index:30;display:none;">
改为绝对定位
position:absolute;
------解决方案--------------------
position:absolute;
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
