今天布局的时候，遇到一个bug，当DIV设置为绝对定位时，这个div后面的相对定位的层里面的<a>Link标签无法点击。

网上的解决方案是在绝对定位层里面添加：pointer-events:none;这样能够让鼠标事件穿透这个绝对定位层，使之能点击到后面的<a>，然后再在这个绝对定位层里面需要接受事件的<a>上面添加：pointer-events:auto;

这样做当元素比较多的时候比较烦。

我发现好一点的解决方案是：

把这个绝对定位的div后面需要点击的link也放到绝对定位的div里面，然后将这个div的z-index设置得大于前一个绝对定位的div即可。

z-index: 9;position: absolute;

解决绝对定位div position: absolute 后面的<a> Link不能点击的更多相关文章

  1. 解决CSS的position:absolute中left效果

    有时候css中设置了position:absolute,left:100px,但是如果我们不想要这个left怎么办呢,当然你直接删除就可以,但是如果是框架的css,你直接删除就有问题了,这时候该怎么办 ...

  2. position:absolute，绝对定位和相对定位，JQ隐藏和显示

    需要在指定位置,用绝对定位. 如果直接写position:absolute,top:0;left:0,那就是以浏览器的左上角为参照了 现在需要在某一个指定位置用绝对定位 解决方法 在需要用绝对定位(p ...

  3. position:absolute/relative/fixed小结

    1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...

  4. position:absolute绝对定位解读

    position:absolute绝对定位解读  摘要   用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...

  5. 绝对定位后，position:absolute;不能使用margin: 0 auto;实现居中；

    声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!d ...

  6. position absolute 绝对定位 设置问题

     今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...

  7. IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

    首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “&g ...

  8. CSS绝对定位和相对定位 position: absolute/relative

    absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...

  9. 层模型--绝对定位(position:absolute)

    如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性相对于其最接 ...

随机推荐

  1. Android——Handler

    Handler——是Android给我们提供用来更新UI的一套机制,也是一套消息处理机制,可以发送也可以处理消息 主要作用:1)在新启动的线程中发送消息:2)在主线程中获取.处理消息. (想想银行取钱 ...

  2. 使用XHR2或Jsonp实现跨域以及实现原理

    我们直接使用XMLHttpRequset请求外部接口 会发现 报这个错误 其实浏览器成功发送请求并拿回了数据  只是浏览器的同源策略 禁止了获取  在xhr2 服务器端支持跨域 需要在响应头增加 Ac ...

  3. BZOJ3670 [Noi2014]动物园

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  4. 取消ie浏览器edge浏览器输入框右边的叉和眼睛

    在ie高版本浏览器和edge浏览器里type为text和password的input框在输入时右边会出现×和眼睛,如果需要清除,方法如下: 首先在页面头部声明兼容性模式 <meta http-e ...

  5. OVGap iOS与Javascript交互(H5与原生APP交互)

    源代码:https://github.com/windshg/OVGap OVGap:一个轻量级的类库,能够让iOS应用和远程网页的 Javascript 代码进行通信,也就是说,远程的 Javasc ...

  6. MySql 小记

    MySql  简单 小记 以备查看 1.sql概述 1.什么是sql? 2.sql发展过程? 3.sql标准与方言的关系? 4.常用数据库? 5.MySql数据库安装? 2.关键概念 表结构----- ...

  7. 如何正确配置Nginx+PHP

    对很多人而言,配置Nginx+PHP无外乎就是搜索一篇教程,然后拷贝粘贴.听上去似乎也没什么问题,可惜实际上网络上很多资料本身年久失修,漏洞百出,如果大家不求甚解,一味的拷贝粘贴,早晚有一天会为此付出 ...

  8. cookie操作简单实现

    var Cookie = { get:function(key){ var reg = new RegExp('(?:^| )' + key + '=([^;]+)(?=;|$)','gi'); re ...

  9. E：“图片视频”的列表页（taxonomy-cat_media.php）

    获取本页的分类ID <?php get_header(); //获取本页的分类ID $cat_title = single_cat_title('', false); //本页分类的名称 $ca ...

  10. 认识Android Service

    一.使用Service 1.什么是Service以及Service的配置项:  Service是Android组件的一种,派生自android.app.service类.它不提供交互界面,只是在后台运 ...