当前位置:编程学习 > C#/ASP.NET >>

web页面,一个Table的<td>中如何让关两个控件重叠啊?

在<body>中让两个层重叠可以设定绝对坐标相同。
比如:
<span id=mt1 style="left:400; z-index:2; position:absolute;top:80;" >
aaaa</span>
<span id=mt2 style="left:400; z-index:1; position:absolute;top:80;" >
bbbbbbbb</span>


但是在一个<td>中如何让它里面的两个层重叠呢? --------------------编程问答-------------------- 用层的概念,主要是把position: absolute;加上,如下
<div style="position: absolute; width: 100px; height: 100px; z-index: 1" id="layer1">
</div>
--------------------编程问答-------------------- 如果是asp的控件的話,可以不採用Flow流布局,而採用Grid布局,也可以。 --------------------编程问答-------------------- 如果是asp的控件的話,可以不採用Float流布局,而採用Grid布局,也可以。 --------------------编程问答-------------------- to:tjvictor(终于升星了,向两星奋斗)

是在<td>里面啊,如果position: absolute来做的话,把窗口缩小的话就会出现位置和窗口最大时位置不符合啊! --------------------编程问答-------------------- 下面代码是一个显示下拉框的代码,在窗口最大化是,下拉框在Table的外面,在窗口缩小后,在Table的里面,
原设想是让一拉框在Table里面。可是Table会随着窗口的大小自动改变自己的位置

<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style> .menutitle{ font-family:黑体; font-size:15; width:100; height:14; background-color:#ff0000; position:absolute;top:80; }
.menu{ font-family:黑体; font-size:15; width:100; height:14; background-color:#000000; position:absolute;top:80; visibility:hidden; }
</style>
</HEAD>
<BODY onmouseover="hidemenu();" bgcolor="#000000">
<form id="Form1" method="post">
<p><font color="#0000ff" size="5" face="全真综艺体">下拉列表</font></p>
<hr>
<table cellSpacing="0" cellPadding="0" width="703" align="center" border="0">
<tr>
<td bgColor="#990000" height=20>
<span id="mt1" class="menutitle" style="Z-INDEX:2; LEFT:90px" onmouseover="showmenu();">
<font color="white">科技公司</font><br>
</span>
</td>
</tr>
</table> 
<span id="m1" class="menu" style="Z-INDEX:1;LEFT:90px" onmouseover="showmenu();">
科技公司<br>
<a href="http://www.mgz.net.cn"><font color="white">mgz福彩网</font></a><br>
<a href="http://www.mgz.net.cn"><font color="white">bbb</font></a><br>
<a href="http://www.mgz.net.cn"><font color="white">aaa</font></a><br>
<a href="http://www.mgz.net.cn"><font color="white">cccdgfhs</font></a><br>
</span>
</form>
<script language="javascript">  
function hidemenu(){
m1.style.visibility="hidden";
}
function showmenu(){m1.style.visibility="visible";
                    event.cancelBubble=true;
}
</script>

</BODY>
</HTML> --------------------编程问答-------------------- 干吗让两个控件重叠呢?  而且关键是这两个控件是什么.

如果其中一个是DropDownList(这东西最讨厌了...)....或者其中一个是个ActiveX控件如Flash之类的,问题还要复杂得多,要根据具体情况分析.

 就像你要在一个 DronDownList的上面再跌一个Button上去几乎是"不可完成的任务" ,但是反过来要在一个Button上面叠一个DropDownList就很容易了. --------------------编程问答-------------------- 解决:用相对:position:relative
相对于<td> 的坐标,这样不管<td>如何变化,它里面的控件都会跟着<td>一起变化

<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style> .menutitle{ font-family:黑体; font-size:15; width:100; height:14; background-color:#ff0000; position:relative;top:3; }
.menu{ font-family:黑体; font-size:15; width:100; height:14; background-color:#000000; position:relative;top:0; visibility:hidden; }
</style>
</HEAD>
<BODY onmouseover="hidemenu();" bgcolor="#000000">
<form id="Form1" method="post">
<p><font color="#0000ff" size="5" face="全真综艺体">下拉列表</font></p>
<hr>
<table cellSpacing="0" cellPadding="0" width="703" align="center" border="0">
<tr>
<td bgColor="#990000" height="20">
<span id="mt1" class="menutitle" style="Z-INDEX:2; LEFT:10px" onmouseover="showmenu();">
<font color="white">科技公司</font><br>
</span>
<!--
“mt1”是相对于<td>,LEFT:10px表示与它相离10px
-->
<input type="text" id="p1" value="Button" size="50" style="Z-INDEX:5;LEFT:-30px;POSITION:relative">
<!--
"text"是相对于“mt1”,LEFT:-30px表示与它最后坐标相重叠
-->
</td>
</tr>
<tr>
<td>
<span id="m1" class="menu" style="Z-INDEX:1;LEFT:10px" onmouseover="showmenu();">
    <a href="http://www.mgz.net.cn"><font color="white">mgz福彩网</font></a><br>
<a href="http://www.mgz.net.cn"><font color="white">bbb</font></a><br>
<a href="http://www.mgz.net.cn"><font color="white">aaa</font></a><br>
<a href="http://www.mgz.net.cn"><font color="white">cccdgfhs</font></a><br>
</span>
</td>
</tr>
</table>
</form>
<script language="javascript">  
function hidemenu(){
                    m1.style.visibility="hidden";
                   }
function showmenu(){m1.style.visibility="visible";
                    event.cancelBubble=true;
 }
</script>
</BODY>
</HTML>
补充:.NET技术 ,  C#
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,