如果把 form表单输入层 的z-index: 15;设成大于 20，
菜单层的弹出菜单又被遮挡，，
急，求助？？
如下CSS代码：
/* 菜单层 */
.main_menu
{
position: absolute;
width: 780px;
height: 30px;
top: 62px;
z-index: 20;
margin-left: 230px;
margin-right: auto;
margin-top:2px;
font-size: 11px;
}
/* form表单输入层*/
.f_inout
{
position: absolute;
width: 1010px;
height:auto;
z-index: 15;
top: 124px;
}
9 个解决方案
#1
没人知道吗？
#2
把你的HTML发过来看看，你的菜单层的高度是30，表单层距离上面是124，应该不会有重复或者遮挡的部分啊，你说的菜单应该是下拉的吧？
#3
对呀，下拉菜单部分和表单层有重叠。不知道有什么好的处理方法。
#4
菜单都是 鼠标经过时显示 鼠标移掉后消失啊...
#5
是呀，但是我表单中的输入框无法输入，得不到焦点。
#6
ding
#7
控制一下form和menu的宽和高
#8
如果 主菜单的 高度设小了，弹出的子菜单又显示不全。哎，麻烦
代码如下
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<style type="text/css">
* { margin:0; padding:0; font-size:12px; color:#000; text-decoration:none; }
body { margin:0; padding:0; background:#fff; }
/* 表单位置*/
.p_include
{
position: absolute;
width: 1010px;
height: auto;
z-index: 15;
top: 40px;
}
/* 主菜单，如果 主菜单的 高度设小了，弹出的子菜单又显示不全？？*/
#nav { width:640px; height:500px; overflow:hidden; margin:0px auto 0 auto; position:relative;z-index:100;}
/* end */
#nav li { float:left;}
#nav_a,#nav_a a,#nav_b,#nav_b a,#nav_c,#nav_c a,#nav_d,#nav_d a,#nav_e,#nav_e a ,#nav_f,#nav_f a ,#nav_g,#nav_g a {
display:block; width:90px; height:30px; overflow:hidden; }
#nav_a a,#nav_b a,#nav_c a,#nav_d a,#nav_e a,#nav_f a,#nav_g a { padding-top:60px; overflow:hidden; }
#nav_a a {background:url(Images/Menu/Menu_ENG.png) 0 0 }
#nav_a a:hover { background:url(Images/Menu/Menu_ENG.png) 0 -33px }
#nav_b a {background:url(Images/Menu/Menu_ENG.png) -90px 0 }
#nav_b a:hover {background:url(Images/Menu/Menu_ENG.png) -90px -33px }
#nav_c a {background:url(Images/Menu/Menu_ENG.png) -181px 0 }
#nav_c a:hover {background:url(Images/Menu/Menu_ENG.png) -181px -33px }
#nav_d a {background:url(Images/Menu/Menu_ENG.png) -273px 0 }
#nav_d a:hover {background:url(Images/Menu/Menu_ENG.png) -273px -33px }
#nav_e a {background:url(Images/Menu/Menu_ENG.png) -365px 0 }
#nav_e a:hover {background:url(Images/Menu/Menu_ENG.png) -365px -33px }
#nav_f a {background:url(Images/Menu/Menu_ENG.png) -456px 0 }
#nav_f a:hover {background:url(Images/Menu/Menu_ENG.png) -456px -33px }
#nav_g a {background:url(Images/Menu/Menu_ENG.png) -548px 0 }
#nav_g a:hover {background:url(Images/Menu/Menu_ENG.png) -548px -33px }
#page_a #nav #nav_a a#cur1 {background:url(Images/Menu/Menu_ENG.png) 0 -68px }
#page_b #nav #nav_b a#cur2 {background:url(Images/Menu/Menu_ENG.png) -90px -68px }
#page_c #nav #nav_c a#cur3 {background:url(Images/Menu/Menu_ENG.png) -181px -68px }
#page_d #nav #nav_d a#cur4 {background:url(Images/Menu/Menu_ENG.png) -273px -68px }
#page_e #nav #nav_e a#cur5 {background:url(Images/Menu/Menu_ENG.png) -365px -68px }
#page_f #nav #nav_f a#cur6 {background:url(Images/Menu/Menu_ENG.png) -456px -68px }
#page_g #nav #nav_g a#cur7 {background:url(Images/Menu/Menu_ENG.png) -548px -68px }
#nav_a ul,#nav_b ul,#nav_c ul,#nav_d ul,#nav_e ul,#nav_f ul,#nav_g ul
{visibility:hidden;position:absolute;left:0px;top:30px; width: 100%;}
#nav_a a:hover ul,#nav_b a:hover ul,#nav_c a:hover ul,#nav_d a:hover ul,#nav_e a:hover ul,#nav_f a:hover ul,#nav_g a:hover ul
{visibility:visible;}
#nav_a ul a,#nav_b ul a,#nav_c ul a,#nav_d ul a,#nav_e ul a,#nav_f ul a,#nav_g ul a
{display:block;border:1px solid #F2FFE6;background:#ffffff;padding:2px 10px;margin:3px;color:#000000;text-decoration:none;}
#nav_a ul a:hover,#nav_b ul a:hover,#nav_c ul a:hover,#nav_d ul a:hover,#nav_e ul a:hover,#nav_f ul a:hover,#nav_g ul a:hover
{background:#fafafa;color:#000000;border:1px solid #000000;}
#nav_a ul li,#nav_b ul li,#nav_c ul li,#nav_d ul li,#nav_e ul li,#nav_f ul li,#nav_g ul li
{clear:both;text-align:left;font-size:12px;}
#nav_a ul li a,#nav_b ul li a,#nav_c ul li a,#nav_d ul li a,#nav_e ul li a,#nav_f ul li a,#nav_g ul li a
{display:block;width:160px;height:18px;margin:0;border:0;border-bottom:1px solid #A9FF53;background: #F2FFE6;}
#nav_a ul li a:hover,#nav_b ul li a:hover,#nav_c ul li a:hover,#nav_d ul li a:hover,#nav_e ul li a:hover,#nav_f ul li a:hover,#nav_g ul li a:hover
{border:0;background:#DDFF95;border-bottom:1px solid #A9FF53;}
</style>
</head>
<body id="page_a">
<form id="form1" runat="server">
<div>
<ul id="nav">
<li id="nav_a"><a href="Menu1.aspx" id="cur1" title="HOME">HOME
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="" target="_self">aaa</a></li>
<li><a href="" target="_self">bbbb</a></li>
<li><a href="" target="_self">ccccc</a></li>
<li><a href="" target="_self">ddddd</a></li>
<li><a href="" target="_self">eee</a></li>
<li><a href="" target="_self">ffffffff</a></li>
<li><a href="" target="_self">ggggg</a></li>
<li><a href="" target="_self">kkkkkkk</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="nav_b"><a href="Menu1.aspx" id="cur2" title="SHIP">SHIP
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="" target="_self">aaSHIPa</a></li>
<li><a href="" target="_self">bbSHIPbb</a></li>
<li><a href="" target="_self">cccSHIPcc</a></li>
<li><a href="" target="_self">dddSHIPdd</a></li>
<li><a href="" target="_self">eeeSHIP</a></li>
<li><a href="" target="_self">fffSHIPfffff</a></li>
<li><a href="" target="_self">gggSHIPgg</a></li>
<li><a href="" target="_self">kkkSHIPkkkk</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="nav_c"><a href="Menu1.aspx" id="cur3" title="TRACK">TRACK</a></li>
<li id="nav_d"><a href="Menu1.aspx" id="cur4" title="PRODUCTS">PRODUCTS</a></li>
<li id="nav_e"><a href="Menu1.aspx" id="cur5" title="SERVICE">SERVICE</a></li>
<li id="nav_f"><a href="Menu1.aspx" id="cur6" title="TOOLS">TOOLS</a></li>
<li id="nav_g"><a href="Menu1.aspx" id="cur7" title="ABOUT US">ABOUT US</a></li>
</ul>
</div>
<!--表单:无法输入，得不到焦点。 -->
<div class="p_include">
<table align="center">
<tr>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
#9
可以控制下form和menu的间距么
用menu padding-top：200px;
#1
没人知道吗？
#2
把你的HTML发过来看看，你的菜单层的高度是30，表单层距离上面是124，应该不会有重复或者遮挡的部分啊，你说的菜单应该是下拉的吧？
#3
对呀，下拉菜单部分和表单层有重叠。不知道有什么好的处理方法。
#4
菜单都是 鼠标经过时显示 鼠标移掉后消失啊...
#5
是呀，但是我表单中的输入框无法输入，得不到焦点。
#6
ding
#7
控制一下form和menu的宽和高
#8
如果 主菜单的 高度设小了，弹出的子菜单又显示不全。哎，麻烦
代码如下
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<style type="text/css">
* { margin:0; padding:0; font-size:12px; color:#000; text-decoration:none; }
body { margin:0; padding:0; background:#fff; }
/* 表单位置*/
.p_include
{
position: absolute;
width: 1010px;
height: auto;
z-index: 15;
top: 40px;
}
/* 主菜单，如果 主菜单的 高度设小了，弹出的子菜单又显示不全？？*/
#nav { width:640px; height:500px; overflow:hidden; margin:0px auto 0 auto; position:relative;z-index:100;}
/* end */
#nav li { float:left;}
#nav_a,#nav_a a,#nav_b,#nav_b a,#nav_c,#nav_c a,#nav_d,#nav_d a,#nav_e,#nav_e a ,#nav_f,#nav_f a ,#nav_g,#nav_g a {
display:block; width:90px; height:30px; overflow:hidden; }
#nav_a a,#nav_b a,#nav_c a,#nav_d a,#nav_e a,#nav_f a,#nav_g a { padding-top:60px; overflow:hidden; }
#nav_a a {background:url(Images/Menu/Menu_ENG.png) 0 0 }
#nav_a a:hover { background:url(Images/Menu/Menu_ENG.png) 0 -33px }
#nav_b a {background:url(Images/Menu/Menu_ENG.png) -90px 0 }
#nav_b a:hover {background:url(Images/Menu/Menu_ENG.png) -90px -33px }
#nav_c a {background:url(Images/Menu/Menu_ENG.png) -181px 0 }
#nav_c a:hover {background:url(Images/Menu/Menu_ENG.png) -181px -33px }
#nav_d a {background:url(Images/Menu/Menu_ENG.png) -273px 0 }
#nav_d a:hover {background:url(Images/Menu/Menu_ENG.png) -273px -33px }
#nav_e a {background:url(Images/Menu/Menu_ENG.png) -365px 0 }
#nav_e a:hover {background:url(Images/Menu/Menu_ENG.png) -365px -33px }
#nav_f a {background:url(Images/Menu/Menu_ENG.png) -456px 0 }
#nav_f a:hover {background:url(Images/Menu/Menu_ENG.png) -456px -33px }
#nav_g a {background:url(Images/Menu/Menu_ENG.png) -548px 0 }
#nav_g a:hover {background:url(Images/Menu/Menu_ENG.png) -548px -33px }
#page_a #nav #nav_a a#cur1 {background:url(Images/Menu/Menu_ENG.png) 0 -68px }
#page_b #nav #nav_b a#cur2 {background:url(Images/Menu/Menu_ENG.png) -90px -68px }
#page_c #nav #nav_c a#cur3 {background:url(Images/Menu/Menu_ENG.png) -181px -68px }
#page_d #nav #nav_d a#cur4 {background:url(Images/Menu/Menu_ENG.png) -273px -68px }
#page_e #nav #nav_e a#cur5 {background:url(Images/Menu/Menu_ENG.png) -365px -68px }
#page_f #nav #nav_f a#cur6 {background:url(Images/Menu/Menu_ENG.png) -456px -68px }
#page_g #nav #nav_g a#cur7 {background:url(Images/Menu/Menu_ENG.png) -548px -68px }
#nav_a ul,#nav_b ul,#nav_c ul,#nav_d ul,#nav_e ul,#nav_f ul,#nav_g ul
{visibility:hidden;position:absolute;left:0px;top:30px; width: 100%;}
#nav_a a:hover ul,#nav_b a:hover ul,#nav_c a:hover ul,#nav_d a:hover ul,#nav_e a:hover ul,#nav_f a:hover ul,#nav_g a:hover ul
{visibility:visible;}
#nav_a ul a,#nav_b ul a,#nav_c ul a,#nav_d ul a,#nav_e ul a,#nav_f ul a,#nav_g ul a
{display:block;border:1px solid #F2FFE6;background:#ffffff;padding:2px 10px;margin:3px;color:#000000;text-decoration:none;}
#nav_a ul a:hover,#nav_b ul a:hover,#nav_c ul a:hover,#nav_d ul a:hover,#nav_e ul a:hover,#nav_f ul a:hover,#nav_g ul a:hover
{background:#fafafa;color:#000000;border:1px solid #000000;}
#nav_a ul li,#nav_b ul li,#nav_c ul li,#nav_d ul li,#nav_e ul li,#nav_f ul li,#nav_g ul li
{clear:both;text-align:left;font-size:12px;}
#nav_a ul li a,#nav_b ul li a,#nav_c ul li a,#nav_d ul li a,#nav_e ul li a,#nav_f ul li a,#nav_g ul li a
{display:block;width:160px;height:18px;margin:0;border:0;border-bottom:1px solid #A9FF53;background: #F2FFE6;}
#nav_a ul li a:hover,#nav_b ul li a:hover,#nav_c ul li a:hover,#nav_d ul li a:hover,#nav_e ul li a:hover,#nav_f ul li a:hover,#nav_g ul li a:hover
{border:0;background:#DDFF95;border-bottom:1px solid #A9FF53;}
</style>
</head>
<body id="page_a">
<form id="form1" runat="server">
<div>
<ul id="nav">
<li id="nav_a"><a href="Menu1.aspx" id="cur1" title="HOME">HOME
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="" target="_self">aaa</a></li>
<li><a href="" target="_self">bbbb</a></li>
<li><a href="" target="_self">ccccc</a></li>
<li><a href="" target="_self">ddddd</a></li>
<li><a href="" target="_self">eee</a></li>
<li><a href="" target="_self">ffffffff</a></li>
<li><a href="" target="_self">ggggg</a></li>
<li><a href="" target="_self">kkkkkkk</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="nav_b"><a href="Menu1.aspx" id="cur2" title="SHIP">SHIP
<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="" target="_self">aaSHIPa</a></li>
<li><a href="" target="_self">bbSHIPbb</a></li>
<li><a href="" target="_self">cccSHIPcc</a></li>
<li><a href="" target="_self">dddSHIPdd</a></li>
<li><a href="" target="_self">eeeSHIP</a></li>
<li><a href="" target="_self">fffSHIPfffff</a></li>
<li><a href="" target="_self">gggSHIPgg</a></li>
<li><a href="" target="_self">kkkSHIPkkkk</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="nav_c"><a href="Menu1.aspx" id="cur3" title="TRACK">TRACK</a></li>
<li id="nav_d"><a href="Menu1.aspx" id="cur4" title="PRODUCTS">PRODUCTS</a></li>
<li id="nav_e"><a href="Menu1.aspx" id="cur5" title="SERVICE">SERVICE</a></li>
<li id="nav_f"><a href="Menu1.aspx" id="cur6" title="TOOLS">TOOLS</a></li>
<li id="nav_g"><a href="Menu1.aspx" id="cur7" title="ABOUT US">ABOUT US</a></li>
</ul>
</div>
<!--表单:无法输入，得不到焦点。 -->
<div class="p_include">
<table align="center">
<tr>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
#9
可以控制下form和menu的间距么
用menu padding-top：200px;