绝对定位下＜a＞标签无法点击

已于 2022-11-02 18:00:57 修改
阅读量700 收藏
点赞数 1
文章标签： js div a
于 2020-02-25 14:25:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xukaiqiang123/article/details/104496827
版权

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

设置标签所在的盒子拥有更高的堆叠顺序
例如

在这里插入图片描述

无形风
关注
元素绝对定位以后设置了高宽,a标签不能点击的原因及解决方法
09-24
总结来说，当遇到绝对定位元素设置了高度和宽度导致内部的a标签无法点击时，开发者应当检查元素是否有内容，以及是否拥有可以交互的背景。如果需要保持绝对定位不变，应该添加透明的背景图或者使用特定于浏览器的...
css设置position:absolute绝对定位后，点击事件不起作用
M__O__M的博客
12-19 3042
css设置position:absolute绝对定位后，点击事件不起作用
# 使用定位position无法触发click等事件的解决
最新发布
qq_39718255的博客
11-03 606
该元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面层中的元素。但是如果它的子元素设置了" pointer-events" 的其他属性值，比如 auto，鼠标事件仍会监听这个子元素。底层有点击事件，但使用定位元素的子元素也有点击事件，这个时候需要给该元素设置为。pointer-events:none，该元素的子元素（有点击操作的）属性设置。底层有点击事件，使用定位的元素的子元素没有点击事件，属性值设为none即可。
解决绝对定位div position: absolute,里面的icon不能点击的问题
qq_23727789的博客
07-27 3244
案例:一个表格,鼠标悬浮在表元上显示图标,单击编辑表元,图标要根据表元类型自动选择 原代码:if(!this.hoverDom){             this.hoverDom = this._property.doc.createElement('div');             this.hoverDom.setAttribute("id","hhdom");           ...
div设置position:fixed或者absolute绝对定位后，click事件失效问题
热门推荐
qq_一望损莓苔的博客
12-24 1万+
div后面需要点击的link或者标签放到绝对定位的div里面，然后将这个div的z-index设置得大于前一个绝对定位的div即可： z-index: 99; position: absolute;  
元素开启绝对定位后点击事件失效解决办法
努力向前，成长可见
02-09 3702
元素开启定位后点击事件失效是因为被上层元素遮挡，点击到的元素此时不是绑定了事件的元素，解决的办法是提升该元素的层级 position: absolute; z-index: 99;
HTML超链接a标签_动力节点Java学院整理
09-28
总结起来，HTML超链接a标签的作用在于实现网页之间的互联互通，是网页设计中不可或缺的部分。通过掌握<a>标签的使用，开发者和网页设计者可以有效地组织和链接网页内容，为用户提供流畅的浏览体验。了解和熟悉超链接...
浏览器跨平台使用div等标签盖住flash的另类实用解决方法
12-13
首先，避免使用`<a>`标签直接包裹`<object>`或`<embed>`标签，这样在某些浏览器中会导致点击事件无法正常工作。正确的方法是让`<a>`标签与Flash元素成为同级元素，即兄弟关系。这样，我们可以独立控制`<a>`标签的...
前端与移动开发之HTML标签
07-23
- `<a>`标签的内容可以是文本、图片、视频或音频等。 ```html <a href="http://www.baidu.com"><img src="img.jpg"/></a> ``` - **锚点链接**: - 点击链接可以快速定位到页面中的某个位置。 ```html <a href...
html元素设置position:absolute绝对定位后，onclick点击事件失效问题
爬楼梯的前端小白的博客
04-06 2394
问题场景：form设置了绝对定位，form里面有个按钮，按钮注册了onclick事件，发现点击按钮没反应； 问题解决：在chrome中打开该网页，鼠标移到这个按钮上右键检查，发现form后面定义的html元素在该按钮的上面层，由此可知 ，我们点击按钮，实际上并没有点击到按钮...... 只需在form绝对定位的样式里添加一行代码，让按钮浮上来： position: absolute; z-index: 99;//添加该行代码即可 转载自:html元素设置position:absolut.
给元素加上 position: absolute 之后无法点击解决办法
ljinest
09-09 5921
这种情况大多数是因为元素绝对定位之后被藏在其他元素的后方了。 就和ppt中的元素被置底一样，但是html中有些情况你还是能看到你的元素 问题描述： 某个点击元素被加上position: absolute属性之后发现没办法点击到了。 原因分析： 这种情况大多数是因为元素绝对定位之后被藏在其他元素的后方了。 就和ppt中的图片被置底一样，但是html中有些情况你还是能看到你的元素，这种情况下我们要把这个元素置顶。 解决方案： 打开开发者工具，选择到你的元素，给这个元素的element style加上一个z-
view加了position:absolute后，bindtap无效
Yeira的博客
02-19 709
结构为view>view，给外层的view加了absolute后，bindtap点击事件无效 原因：层级关系，view不在最上层 解决方法：设置了z-index后有效了（z-index:100）
动态设置a链接,移动端safari点击跳转失效问题---kalrry
kalrry
02-19 1847
动态设置网页a链接safari点击失效问题---kalrry原因解决 原因 safari(一般是移动端)不能穿透div点击事件。a链接所在标签被其他div盖住了。 解决 给a标签所在父div添加样式 style=“position: relative ; z-index: 1” <div class="pic" style="position: relative ; z-index: 1"> ...
点击a标签没反应
高彩琼的博客
05-14 1万+
修改了一下样式，发现a标签点击没反应了，感觉跟没点一样~（正常情况下子元素都在父元素上面，点击a标签，会跳转）检查一下发现是设置a标签的z-index：-1；父元素nav的overflow：hidden时；把a标签全部遮盖住了，所以点击不到a标签，页面才没反应。删除a标签的z-index：-1；属性就解决了...
a标签position为absolute时，IE无法点击（a position:absolute bug ie）
Just Code
08-09 215
为什么要把a标签搞为absolute呢？很多时候为了覆盖在其他html标签上，实现一些点击，比如一个flash广告，要想在整个flash上加一个链接，单击整块flash链接到某个网页。   用一个绝对定位的a标签覆盖在flash上： &lt;style&gt; .flash { width:200px;height;200px;position:relative; } .flash-l...
解决了设置了position: absolute；点击没触发问题
FUFCY的博客
05-12 1392
点击没反应是权重不够，给设置了position: absolute;那个盒子样式加 z-index:999;就可以了
关于绝对定位后元素(a标签)无法点击
精彩人生
08-19 4426
最近群里有人提了IE中a标签绝对定位设置高宽却无法点击的问题，其实这个是老问题了，最近在写一个JS效果的时候也遇到，今天顺便也做一个记录！元素绝对定位以后设置了高宽原因： 1、元素内并无内容 2、背景是透明的，无任何背景图或者颜色 解决方法： 1、如果不是绝对定位元素的，可以用相对定位 2、给元素加透明的背景图 3、IE可以只用 background:url(about:blank
<!DOCTYPE html> <html> <head> <title>网站首页</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0 0; padding: 0 0; } /* 导航栏样式 */ ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } .login{ float: right; } /* 轮播图样式 */ .slideshow-container { position: absolute; top: 68px; left: 360px; margin: auto; height: 500px; width: 800px; } .mySlides { position: absolute; top: 0; left: 0; width: 800px; height: 500px; } .prev, .next { position: absolute; top: 50%; font-size: 30px; font-weight: bold; padding: 10px; cursor: pointer; z-index: 1; } .prev { left: 0; color: aliceblue; background-color:rgba(105,105,105,0.8); user-select: none; } .prev:active{ transform: scale(0.8); } .next:active{ transform: scale(0.8); } .next { right: 0; color: aliceblue; background-color:rgba(105,105,105,0.8); user-select: none; } img{ height: 500px; width: 800px; } </style> <script src="js/jquery-1.12.4.js"></script> <script> var index=1; $(function(){ $('.prev').click(function(){ index--; if(index<1) index=3; $('#pic').attr('src','../images/0'+index+'.jpg'); }) $('.next').click(function(){ next() }) window.setInterval("next()",2500) $('.prev').mouseover(function(){ $(this).css('color','#000') $(this).css('background-color','rgba(105,105,105,0.5)') }).mouseout(function(){ $(this).css('color','') $(this).css('background-color','') }) $('.next').mouseover(function(){ $(this).css('color','#000') $(this).css('background-color','rgba(105,105,105,0.5)') }).mouseout(function(){ $(this).css('color','') $(this).css('background-color','') }) }) function next(){ index++; if(index>3) index=1; $('#pic').attr('src','../images/0'+index+'.jpg'); } </script> </head> <body> <!-- 导航栏 --> <ul> <li><a class="active" href="#home">首页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">大唐不夜城</a></li> <li><a href="#about">展点信息</a></li> <li class="login"><a href="#">登录</a></li> </ul> <!-- 轮播图 --> <div class="slideshow-container"> <div class="mySlides"> <img src="../images/01.jpg" alt="" id="pic"> </div> <a class="prev">❮</a> <a class="next">❯</a> </div> </body> </html>
07-15
这是一个简单的网站首页的HTML代码，包括导航栏和一个轮播图。导航栏使用了无序列表（`ul`）和列表项（`li`），通过CSS样式设置了背景颜色和鼠标悬停时的效果。轮播图部分使用了绝对定位和JavaScript实现了自动切换和点击切换的功能。图片使用`img`标签显示，并设置了固定的宽度和高度。整个页面使用了一些CSS样式来设置布局和外观。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值