css穿透绝对定位的层使下面的链接可点击

最新推荐文章于 2025-03-31 14:16:49 发布
原创 最新推荐文章于 2025-03-31 14:16:49 发布 · 4.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种解决前端页面中元素遮挡下方元素导致无法正常点击的技术方案。通过为遮挡元素设置 pointer-events:none 属性，使得鼠标事件能够穿透该元素，从而实现对下方元素的正常交互。

在你定位的元素上加上

pointer-events: none;

提示 是你定位的元素哦（我定位在上面宽是百分百，高是百分百挡住了下面的点击  比较a链接等等）

CSS - 元素遮挡（层级/定位等等）导致无法点击下层元素解决方案
🏆 前端领域优质创作者
05-08 8907
前言 如果遇到因 层级 定位 其他原因 导致点击不到下层元素，如下图所示： 解决方案 pointer-events 文档：https://www.w3school.com.cn/cssref/pr_pointer-events.asp 不需要调整什么 z-index 层级还是相对绝对定位，直接使用 鼠标穿透属性 pointer-events。 需要注意的是，有些情况并不适用。 /* 给父元素(遮挡的元素) */ .div{ pointer-events: none; } ...
css中pointer-events属性详解
12-13
在给出的示例中，有两个绝对定位的`div`元素（`.overlay1`和`.overlay2`）覆盖了一个链接`<a>`和一个`<span>`元素。默认情况下，这两个`div`元素的`pointer-events`属性为`auto`，因此它们会拦截鼠标的点击事件，...
CSS之允许点击穿透
yiguoxiaohai的博客
07-28 1682
CSS之允许点击穿透，点击事件穿透本层
解决absolute绝对定位带来的div穿透问题
jiaohuizhuang6019的博客
09-10 1168
解决absolute绝对定位带来的div穿透问题
css穿透点击
weixin_30593443的博客
10-19 700
css属性pointer-events 这绝对定位元素盖住链接或添加某事件handle的元素后，那么该链接的默认行为（页面跳转）或元素事件将不会被触发。 现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。 如下： <!DOCTYPE html><...
CSS点击事件穿透
weixin_74261199的博客
09-27 1674
假设盒子中有一个按钮，要实现。
css pointer-events属性实现下面元素可点击
09-25
为了实现这个效果，代码创建了一个包含多个链接的容器，并在其中添加了一个名为`overlay`的绝对定位的div，覆盖在链接上。通过JavaScript监听`checkbox`的`onclick`事件，动态地添加或移除`pointer-events-none`类，...
解决Firefox浏览器中元素绝对定位重叠导致点击失效问题
5. 解决方案：对于Firefox下绝对定位元素重叠导致不可点击的问题，可以考虑以下几种解决方案： - 使用z-index属性来控制元素的堆叠顺序，确保用户可以点击到最上层的元素。 - 如果是在移动端浏览器出现的问题，...
弹出层居中问题的CSS解决方案
本文将围绕“弹出层居中问题”这一主题，结合给定的标题《弹出层居中问题版1》、描述中提供的博文链接以及相关标签（如弹出层、居中、CSS、宽度、高度、HTML、层控制、样式、前端、布局），深入探讨弹出层在不同场景...
css 绝对定位元素挡住下方元素点击解决办法
fanyanjiang的博客
06-03 5393
pointer-events:none; 表示它将捕获不到任何点击，而只是让事件穿透到它的下面。 pointer-events:auto; 表示鼠标不会穿透当前层, 鼠标事件仍会监听这个父元素下面的子元素。 外层div如果已经绝对或相对定位了（并且本层有点击事件或其他执行事件继续有效，这两步执行后，外层的父元素上的事件会正常执行，同时下层元素也可点击）： position: absolute; z-index:9999 pointer-events: none; 内层div设置绝对定位：
css层级穿透
weixin_44951385的博客
01-21 663
1.>>>(如果项目使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改) <style scoped> /*编译前*/ .a >>> .b { /* ... */ } /*编译后*/ .a[data-v-f3f3eg9] .b { /* ... */ } </style> 2./deep/(项目中用到了预处理器 scss 、sass、less 操作符>>>可能会因为无法编译而报...
css之点击穿透
qq_34907249的博客
02-11 1111
能够实现对下层元素的操作。
用css控制点击穿透
u010281877的博客
08-11 7139
当开发遇到一种场景,比如在一个元素上添加遮罩层,但是点击在遮罩层上时,实际触发下方的元素点击事件,而不是遮罩层 可以用css属性 pointer-events 来控制; pointer-events: none 指定当前元素不可点击,点击会默认穿透到下方元素 ...
Css 样式点击穿透
m0_71615654的博客
01-17 630
什么是pointer-events？
【css】点击穿透事件
最新发布
spicyIsPleasant的博客
03-31 337
一个页面上有很多按钮，且有点击事件。现在给这个页面加一个水印，水印是fixed的布局。此时页面上按钮的点击事件触发不了。
css：css属性pointer-events实现点击穿透
彭世瑜的博客
12-06 4772
文档pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target常用属性 案例一 看一段 css 和 js 代码，由里到外嵌套 点击 事件触发顺序 点击 事件触发顺序 点击 事件触发顺序 案例二 修改一下布局，外层相对定位，内层绝对定位 点击 事件触发顺序 点击 事件触发顺序 点击 事件触发顺序 如果设置css属性 点击，只会触发如下事件，实现了穿透效果
CSS鼠标穿透
.Net9527的技术博客
02-24 2035
CSS新属性pointer-events：字面理解是点击鼠标事件，值分别是auto和none。 当使用pointer-events:none,表示它将捕获不到任何点击. <a href="https://www.baidu.com" style="pointer-events: none;"> 百度(不可点击) </a> <br/><br/><br/><br/><br/><br/><br/>&l
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

An_s

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值