zoukankan      html  css  js  c++  java
  • 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%;
    			200px;
    			height:100px;
    			border:1px solid gray;
    			padding:5px;
    			/*z-index:1;*/
    		}
    		#d2{
    			position:absolute;
    			top:25%;
    			left:40%;
    			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。

  • 相关阅读:
    django---url---03
    django---url---02
    django--url---路由分配3种情况
    pycharm导入.py文件报错
    django 常见环境问题
    python+appium+unittest 启动一次app,执行多条test
    查找夜神模拟器app的安装包
    Android_smali_代码注入
    vue uuid的使用
    vue_elementui_tab刷新保持当前状态
  • 原文地址:https://www.cnblogs.com/snandy/p/1980035.html
Copyright © 2011-2022 走看看