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

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。

posted on 2011-03-11 08:27  snandy  阅读(2986)  评论(1)  编辑  收藏  举报