弹出层问题!
做了个简单的网页,模仿校内网的高级搜索可是点击大学的输入框,弹出的层不能覆盖<select></select>,把层的z-index属性改到很大也不行,请问如何解决?
代码如下:
<html>
<head>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:410px;
height:233px;
z-index:99;
left: 7px;
top: 109px;
background-color: #CCCCCC;
display:none;
}
#Layer2 {
position:absolute;
width:39px;
height:20px;
z-index:101;
left: 376px;
top: 210px;
}
-->
</style>
<script type="text/javascript">
function closeDiv(){
document.getElementById("Layer1").style.display='none';
}
function displayDiv(){
document.getElementById("Layer1").style.display='block';
}
</script>
</head>
<body>
<h1>高级搜索</h1>
<form>
<table>
<tr>
<td>
姓名:
</td>
<td>
<input type="text" name="userName"/>
</td>
</tr>
<tr>
<td>
大学:
</td>
<td>
<input type="text" name="university" onClick="displayDiv()"/>
</td>
<td>
<select name="daxueInTime">
<option value="">入学年份</option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<select name="yuanxi">
<option value="">院系</option>
</select>
<select name="sushe">
<option value="">宿舍</option>
</select>
</td>
</tr>
<tr>
<td>
高中:
</td>
<td>
<input type="text" name="gaozhong"/>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
班级:
</td>
<td>
<select name="nianji">
<option value="">请选择年级</option>
<option value="1">高一</option>
<option value="2">高二</option>
<option value="3">高三</option>
</select>
</td>
<td>
<select name="banji">
<option value="">请选择班级</option>
</select>
</td>
<td>
<select name="gaozhongInTime">
<option value="">入学年份</option>
</select>
</td>
</tr>
<tr>
<td>
初中:
</td>
<td>
<input type="text" name="chuzhongName"/>
</td>
<td>
<select name="chuzhongInTime">
<option value="">入学年份</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td>
小学:
</td>
<td>
<input name="xiaoxueName" type="text"/>
</td>
<td>
<select name="xiaoxueInTime">
<option value="">入学年份</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td>
性别:
</td>
<td>
<input type="radio" name="sex" value="3" checked="checked"/>不限 <input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>
生日:
</td>
<td>
<select name="birthdayYear">
<option value="">选择年份</option>
</select>年
</td>
<td>
<select name="birthdayMonth">
<option value="">月份</option>
</select>月
</td>
<td>
<select name="birthdayMonth">
<option value="">天</option>
</select>日
</td>
</tr>
<tr>
<td>
家乡:
</td>
<td>
<select name="homeSheng">
<option value="">-请选择省/市-</option>
</select>
</td>
<td>
<select name="homeShi">
<option value="">城市</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td>
星座:
</td>
<td>
<select name="xingzuo">
</select>
</td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="submit" value="搜索"/>
</td>
</tr>
</table>
</form>
<div id="Layer1">
<div id="Layer2">
<input type="button" value="关闭" onClick="closeDiv()"/></div>
</div>
</body>
</html>