今天布局的时候,遇到一个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. Leetcode 45. Jump Game II

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  2. java 方法

    方法命名规范要求 类的命名规范:“全部单词的 首字母必须大写”.那么在定义方法的时候也是有命名规范要求的:“第 一个单词的首字母小写,之后每个单词的首字母大写”,那么这就是方法 的命名规范. 递归调用 ...

  3. 【Beta】Scrum07

    Info 由于编译考试,会议记录推迟发布.18~19两天工作暂停:同时由于有组员外出不在学校,本次会议采用线上会议形式 时间:2016.12.17 21:35 时长:15min 地点:讨论组 类型:线 ...

  4. 几种常见的Shell

    Unix/Linux上常见的Shell脚本解释器有bash.sh.csh.ksh等,习惯上把它们称作一种Shell.我们常说有多少种Shell,其实说的是Shell脚本解释器. bash bash是L ...

  5. eclipse使用sublime配色(转)

    转自 Eclipse设置类似Sublime Text 编辑区皮肤,风格,颜色 1.首先打开eclipse 2.help -> Install New SoftWare  3.点击 Add 在Na ...

  6. LibreOffice去重复数据

    菜单:数据--更多筛选---标准筛选 点开“选项”,勾上“无重复值”. 然后还可以把结果复制到其它单元格.

  7. JavaScript 实现5秒倒计时,接着跳转

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 【10-26】java调试技术学习笔记

    调试工具 jdk自带的工具 jmap jconsole VisualVM jmap jmap -histo:live pid 列出该进程的所有活动实例统计信息 jmap -dump:live,file ...

  9. 用uniq来处理文件重复数据--交集,差集,计数等(转)

    经常有这样的需求:两个文本文件要求取重复的行或只取不重复的,简单的情况下用sort和uniq来处理是非常方便的: 利用现存两个文件,生成一个新的文件 取出两个文件的并集(重复的行只保留一份) 取出两个 ...

  10. dispatcherServlet 真正处理请求的源码解析

    学习博客: http://wujiu.iteye.com/blog/2214603