标题:弹出层问题!
取消只看楼主
海风308
Rank: 1
等 级:新手上路
帖 子:64
专家分:0
注 册:2008-10-28
结帖率:100%
 问题点数:0 回复次数:2 
弹出层问题!
做了个简单的网页,模仿校内网的高级搜索
可是点击大学的输入框,弹出的层不能覆盖<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"/>不限&nbsp;<input type="radio" name="sex" value="1"/>男&nbsp;
    <input type="radio" name="sex" value="0"/>女&nbsp;
    </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>
搜索更多相关主题的帖子: 校内网 style 大学 
2008-12-10 13:18
海风308
Rank: 1
等 级:新手上路
帖 子:64
专家分:0
注 册:2008-10-28
得分:0 
谢谢,可以了,可是能告诉我这是什么原理吗?
2008-12-10 14:25
海风308
Rank: 1
等 级:新手上路
帖 子:64
专家分:0
注 册:2008-10-28
得分:0 
原来如此,谢谢!
2008-12-10 14:42



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-248583-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.143289 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved