您的位置：首页 > 其它

Firefox/Safari/Chrome绝对定位元素重叠造成不可点击问题

2011-03-11 08:27 567 查看
51ditu地图网站开发过程中碰到的，Firefox/Safari/Chrome下（无论诡异模式或标准模式）当两个绝对定位的div发生重叠（即一个div盖在另一个div上）时，下面的div变得不可点击了。解决的方法是设置z-index，z-index值大的就可以点击了。而IE下，即使z-index值高的div，下面的div中的button仍然可以点击。

<!DOCTYPE HTML>
<html>
<head>
<title>Firefox/Safari/Chrome绝对定位元素重叠造成不可点击问题</title>
<meta charset="utf-8">
<style type="text/css">
#d1{
position:absolute;
top:15%;
left:41%;
width:200px;
height:100px;
border:1px solid gray;
padding:5px;
/*z-index:1;*/
}
#d2{
position:absolute;
top:25%;
left:40%;
width:230px;
height:130px;
border:1px solid red;
/*z-index:2;*/
}
</style>
</head>
<body>
<div id="d1">
<input type="button" value="查询" onclick="alert(3);">
</div>
<div id="d2"></div>
</body>
</html>


Firefox/Safari/Chrome 中点击查询按钮没反应，IE/Opera中则弹出3。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航