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  阅读(2995)  评论(1编辑  收藏  举报