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

时间：2011-03-11 来源：snandy

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;
                        
                        border:1px solid gray;
                        padding:5px;
                        /*z-index:1;*/
                }
                #d2{
                        position:absolute;
                        top:25%;
                        left:40%;
                        width:230px;
                                           
                        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。