解决绝对定位div position: absolute 后面的 Link不能点击

今天布局的时候,遇到一个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&colon;absolute中left效果

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

  2. position&colon;absolute,绝对定位和相对定位,JQ隐藏和显示

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

  3. position&colon;absolute&sol;relative&sol;fixed小结

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

  4. position&colon;absolute绝对定位解读

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

  5. 绝对定位后,position&colon;absolute&semi;不能使用margin&colon; 0 auto&semi;实现居中;

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

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

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

  7. IE6&sol;IE7下绝对定位position&colon;absolute和margin的冲突问题解决

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

  8. CSS绝对定位和相对定位 position&colon; absolute&sol;relative

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

  9. 层模型--绝对定位&lpar;position&colon;absolute&rpar;

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

随机推荐

  1. 【代码笔记】iOS-自定义弹出框

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. [s ...

  2. &lbrack;LeetCode&rsqb; Repeated Substring Pattern 重复子字符串模式

    Given a non-empty string check if it can be constructed by taking a substring of it and appending mu ...

  3. IPv4组播通信原理

    2011-05-08 21:21:14 标签:组播 vin_do,vin_do学习笔记,笔记 休闲 职场 摘自网络,感谢原作者 摘要: 本文试图成为学习TCP/IP网络组播技术的入门材料.文中介绍了组 ...

  4. HBase学习笔记-HBase性能研究&lpar;1&rpar;

    使用Java API与HBase集群交互时,需要构建HTable对象,使用该对象提供的方法来进行插入/删除/查询等操作.要创建HTable对象,首先要创建一个带有HBase集群信息的配置对象Confi ...

  5. 【高清未加密】2015传智播客 最新21期c&num;asp&period;net 基础到就业班视频和源码

    [.NET]传智播客第[21]期就业班视频(高清无加密)本套2015年21期传智播客C#ASP.NET win10通用mvc+app开发视频教程附源码,是一套非常不错的asp.net自学视频教程,传智 ...

  6. python入门笔记第一天

    查询acsii命令 ord(‘A’) 导入模块python执行系统命令显示文件.查找文件方法1import osa = os.popen('目标').read()a 解释output = os.pop ...

  7. 【Android - 框架】之MVP模式的使用

    提起MVP架构模式,大家可能首先想到的是它的"前辈"MVC模式.MVC由Model.View.Controller组成,请求从Controller进入后进行业务判断,然后交给Mod ...

  8. java读写串口

    http://blog.csdn.net/xxyy888/article/details/8946046

  9. 关于Vue的路由、脚手架笔记

    在页面引入vue-router.js文件,开始配置路由 <div id="box"> <ul><li> <a v-link="{ ...

  10. &lbrack;3&rsqb;第二章 C&plus;&plus;编程简介

    (本资料均从 internet 上进行收录整理,若要转载,请与原作者联系) 2.1  机器语言.汇编语言和高级语言 程序员用各种编程语言编写指令,有些是计算机直接理解的,有些则需要中间翻译(tranl ...