关于绝对定位后元素(a标签)无法点击

最新推荐文章于 2023-06-27 23:45:17 发布
最新推荐文章于 2023-06-27 23:45:17 发布
阅读量4.4k 收藏
点赞数
分类专栏： javascript CSS 文章标签： ie url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/load_life/article/details/7884509
版权

最近群里有人提了IE中a标签绝对定位设置高宽却无法点击的问题，其实这个是老问题了，最近在写一个JS效果的时候也遇到，今天顺便也做一个记录！元素绝对定位以后设置了高宽原因：
1、元素内并无内容
2、背景是透明的，无任何背景图或者颜色

解决方法：
1、如果不是绝对定位元素的，可以用相对定位
2、给元素加透明的背景图
3、IE可以只用 background:url(about:blank) 解决

第三种方法平时用用是可以的，但是在某种情况下会有bug, 比如JS拖动层时候，拖动的事件在一个透明层上面，你有设置了其他鼠标光标，这时候拖动就会出现光标闪烁的现象！
这里建议第二种方法，弄一个1*1PX的透明图就好！

load_life
关注
专栏目录
绝对定位、元素的显示与隐藏
qq_53764714的博客
02-11 886
对css中绝对定位，元素的隐藏与显示，伪类的应用，制作当鼠标经过时，图片显示黑色半透明遮罩和播放按钮。
HTML元素定位方式——相对定位、绝对定位、固定定位、浮动定位
Elltor
08-26 5283
布局排版是网页设计的基础，熟练使用各种定位写起网页来会更得心应手。 静态定位 当添加一个HTML元素，不设置定位方式默认为静态定位（position：static），静态定位属于文档流（排列方式就像文本，一行一行排列，文字多出会换行）。 相对定位 相对定位（position：relative）是相对于自己之前的位置进行定位，如果不改变top、bottom、left、right与文档流元素无...
绝对定位下＜a＞标签无法点击
xukaiqiang123的博客
02-25 712
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释：元素可拥有负的 z-index 属性值。 注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！ 设置标签所在的盒子拥有更高的堆叠顺序 例如 我的账号 ...
CSS - 元素遮挡（层级/定位等等）导致无法点击下层元素解决方案
王佳斌
05-08 8237
前言 如果遇到因 层级 定位 其他原因 导致点击不到下层元素，如下图所示： 解决方案 pointer-events 文档：https://www.w3school.com.cn/cssref/pr_pointer-events.asp 不需要调整什么 z-index 层级还是相对绝对定位，直接使用 鼠标穿透属性 pointer-events。 需要注意的是，有些情况并不适用。 /* 给父元素(遮挡的元素) */ .div{ pointer-events: none; } ...
IE6下a标签absolute定位后，不能点击的问题
weixin_30526593的博客
10-28 91
问题描述： 在下面的图中，我想把这个"立即购买“是用”a"标签block后，加上absolut，在现代浏览器下没有问题，在IE6,7下问题来了，不能点击。 尝试： 1. 加上z-index,把它设置的很高（无用）。 2. 把a标签内加入内容（无用） 解决方案： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transi...
元素开启绝对定位后点击事件失效解决办法
努力向前，成长可见
02-09 3757
元素开启定位后点击事件失效是因为被上层元素遮挡，点击到的元素此时不是绑定了事件的元素，解决的办法是提升该元素的层级 position: absolute; z-index: 99;
absolute 导致点击事件无效
weixin_30737433的博客
08-11 763
方案一: 添加层数 z-index 方案二： 背景的透明度为0 background-color:#000; filter:alpha(opacity=0); opacity:0; 转载于:https://www.cnblogs.com/ch-zaizai/p/7344007.html...
元素绝对定位以后设置了高宽,a标签不能点击的原因及解决方法
09-24
总结来说，当遇到绝对定位元素设置了高度和宽度导致内部的a标签无法点击时，开发者应当检查元素是否有内容，以及是否拥有可以交互的背景。如果需要保持绝对定位不变，应该添加透明的背景图或者使用特定于浏览器的...
Javascript中使用A标签获取当前目录的绝对路径方法
10-24
我们可以创建一个A标签元素，并给其href属性赋予相对路径，然后通过该属性获取绝对路径。 在JavaScript中使用A标签获取当前目录绝对路径的示例代码如下： ```javascript var a = document.createElement('a'); a....
新手.关于css父级加入绝对定位后，子标签的text-align失效的解决方法
weixin_43949438的博客
06-08 1972
<div> <ul> <li>菜单</li> <li>菜单</li> </ul> </div> 问题：在给div加入绝对定位后，让li左浮动，设置左间距（margin-left）,让li并排且有间距的排列，但是却无法让li在ul里居中排列。 解决：此时只要让ul 设display...
解决绝对定位元素遮住可见内容使其不可点击问题
qq_38652744的博客
08-14 786
pointer-events: none; pointer-eventsCSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的target。 当此属性未指定时，visiblePainted值的相同特征适用于 SVG（可缩放矢量图形） 内容。 除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。 ...
CSS3中z-index不生效怎么办？
金木AI
06-27 4230
确保要设置 z-index 的元素具有正确的定位属性。如果要使一个元素位于另一个元素之上，两个元素应该是兄弟节点（即拥有同一个父元素），并且具有相应的定位属性和 z-index 值。5、z-index 值过大或过小：z-index 值应该是一个整数，较大的值会使元素在层叠顺序中更靠前，较小的值则会使元素在层叠顺序中更靠后。3、父元素的 z-index 值：父元素的 z-index 值可能会影响子元素的层叠顺序。4、元素被其他元素遮挡：如果一个元素被其他元素完全遮挡，那么它的 z-index 值不会生效。
给元素加上 position: absolute 之后无法点击解决办法
ljinest
09-09 6106
这种情况大多数是因为元素绝对定位之后被藏在其他元素的后方了。 就和ppt中的元素被置底一样，但是html中有些情况你还是能看到你的元素 问题描述： 某个点击元素被加上position: absolute属性之后发现没办法点击到了。 原因分析： 这种情况大多数是因为元素绝对定位之后被藏在其他元素的后方了。 就和ppt中的图片被置底一样，但是html中有些情况你还是能看到你的元素，这种情况下我们要把这个元素置顶。 解决方案： 打开开发者工具，选择到你的元素，给这个元素的element style加上一个z-
selenium Python 使用css定位到元素后，无法点击unclikcable
qq_30116343的博客
06-12 318
问题：Message: element click intercepted: Element <a href="#" class="pagination_btn_page__FuJaU" data-ncl 参看https://blog.csdn.net/qq_41424519/article/details/87906207 解决：e = self.driver.find_element_by_css_selector('span+a[class*="pagination_btn_page"].
元素绝对定位以后设置了高宽，a标签不能点击的原因总结
weixin_30751947的博客
09-08 217
元素绝对定位以后设置了高宽，a标签不能点击的原因： 1、元素内并无内容 2、背景是透明的，无任何背景图或者颜色 解决方法： 1、如果不是绝对定位元素的，可以用相对定位 2、给元素加透明的背景图 3、IE可以只用 background:url(about:blank) 解决 第三种方法平时用用是可以的，但是在某种情况下会有bug, 比如JS拖动层时候，拖动的事件在一个透明层上面，你有设...
a标签绝对定位后加margin不起作用
最新发布
08-13
当你给 `<a>` 标签应用了绝对定位 (`position: absolute;`) 后，`margin` 属性对其的定位不起作用。这是因为绝对定位会将元素从正常的文档流中脱离出来，并且不会占据原始文档流的空间。 如果你需要调整绝对定位的 `<a>` 标签的位置，可以使用 `top`, `right`, `bottom`, `left` 属性来精确指定其在父元素中的位置。例如： ```css a { position: absolute; top: 20px; left: 20px; } ``` 上述代码将把 `<a>` 标签相对于其父元素的左上角向下移动 20px，向右移动 20px。 如果你希望使用 `margin` 来调整绝对定位元素的位置，可以将其父元素也设置为相对定位 (`position: relative;`)，然后使用 `margin` 调整子元素的位置。例如： ```css .parent { position: relative; } a { position: absolute; margin-top: 20px; margin-left: 20px; } ``` 在这种情况下，通过给父元素 `.parent` 设置相对定位，并使用 `margin` 来调整子元素 `<a>` 的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值