html元素设置position:absolute绝对定位后，onclick事件失效问题解决

最新推荐文章于 2023-11-03 17:52:23 发布
最新推荐文章于 2023-11-03 17:52:23 发布
阅读量1.1w 收藏 2
点赞数 5
CC 4.0 BY-SA版权
文章标签： HTML CSS JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33736234/article/details/90341809
博客讲述了一个前端问题，form设置绝对定位后，里面按钮注册onclick事件却点击无反应。通过在chrome中右键检查发现，form后定义的html元素在按钮上层。解决办法是在form绝对定位样式里添加代码，让按钮浮上来。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题场景：form设置了绝对定位，form里面有个按钮，按钮注册了onclick事件，发现点击按钮没反应；

问题解决：在chrome中打开该网页，鼠标移到这个按钮上右键检查，发现form后面定义的html元素在该按钮的上面层，由此可知 ，我们点击按钮，实际上并没有点击到按钮......

只需在form绝对定位的样式里添加一行代码，让按钮浮上来：

position: absolute;
z-index: 99;//添加该行代码即可

 

Ares_2020
关注
html元素设置position:absolute绝对定位后，onclick点击事件失效问题
爬楼梯的前端小白的博客
04-06 2592
问题场景：form设置了绝对定位，form里面有个按钮，按钮注册了onclick事件，发现点击按钮没反应； 问题解决：在chrome中打开该网页，鼠标移到这个按钮上右键检查，发现form后面定义的html元素在该按钮的上面层，由此可知 ，我们点击按钮，实际上并没有点击到按钮...... 只需在form绝对定位的样式里添加一行代码，让按钮浮上来： position: absolute; z-index: 99;//添加该行代码即可 转载自:html元素设置position:absolut.
绝对定位后的元素无法触发点击事件
qq_45832807的博客
08-12 4389
解决方法 可以通过给绝对定位的层多加一个样式：" pointer-events:none; " 这样绝对定位层下的元素就可以点击了；如果在绝对定位层上存在能够点击的元素，在添加" pointer-events:none; " 后将同样不起作用；为了避免此情况，可以给需要操作的元素设置" pointer-events:auto" 即可。 详情 ionic试例： <ion-app> <ion-content fullscreen class="ion-padding-bottom"
css设置position:absolute绝对定位后，点击事件不起作用
M__O__M的博客
12-19 3392
css设置position:absolute绝对定位后，点击事件不起作用
前端给某个元素加上position：absolute导致input框无法点击
m0_46544598的博客
02-10 629
可能是因为元素绝对定位之后把input框藏在其他元素的后方了。具体解决办法：给加绝对定位的同时加上z-index层级高一点。我这儿加的是3，可以打开f12慢慢调，建议不要层级过大。解决办法：把input框置顶。
【IE bug 解决办法】IE下（IE10及以下）当元素为absolute定位时，点击事件失效的解决办法
snow_finland的专栏
06-26 4574
不如下面这个例子： Demo .wrap{ width:540px; height:260px; position:relative; } .layer_pre{ position:absolute; top:0; left:0; width:250px; height:240px; } .layer_next{ position:absolute; top:
给元素加上 position: absolute 之后无法点击解决办法
ljinest
09-09 6548
这种情况大多数是因为元素绝对定位之后被藏在其他元素的后方了。 就和ppt中的元素被置底一样，但是html中有些情况你还是能看到你的元素 问题描述： 某个点击元素被加上position: absolute属性之后发现没办法点击到了。 原因分析： 这种情况大多数是因为元素绝对定位之后被藏在其他元素的后方了。 就和ppt中的图片被置底一样，但是html中有些情况你还是能看到你的元素，这种情况下我们要把这个元素置顶。 解决方案： 打开开发者工具，选择到你的元素，给这个元素的element style加上一个z-
元素开启绝对定位后点击事件失效解决办法
努力向前，成长可见
02-09 3921
元素开启定位后点击事件失效是因为被上层元素遮挡，点击到的元素此时不是绑定了事件的元素，解决的办法是提升该元素的层级 position: absolute; z-index: 99;
vue 及 js 微信中 页面输入框被键盘顶上去之后，点击域错误 弹出框fixed absolute 定位的输入框 键盘弹出导致点击域失效 解决办法
lizhen_software的博客
08-13 662
造成这种问题的原因是body没有复位，所以把body 复位就可以了。 解决思路：1、input获取焦点的时候记住当前滚动的位置，2、input失去焦点的时候滚动到之前的位置。（亲测有效）。 附vue 代码，其他框架可以依据该思路修改。 PageScroll:0,// 位置 这个在data 里面定义变量 inputLoseBlur() { setTimeout(() => { ...
html 页面定位失效,html – CSS相对定位不起作用
weixin_34231219的博客
06-03 480
出于某种原因,我无法将我的图像定位到Twitter Feed的右侧.我把它定位在twitter feed的DIV标签内,但它仍然在下面.这是实时链接：http://www.lymemd.org/indexmm6.php我的CSS：#twitterfeed {position: relative;}#drshow {position: relative;left: 200px;}我的HTML：dat...
百度地图在移动端下click无效的解决方案
weixin_30687051的博客
04-17 1237
这是由于百度地图在移动端屏蔽了click事件，在网上找到一种方法，利用touchClick方法来模拟click事件，代码如下（需要JQ插件）： 1 //给jquery添加touchClick方法 2 (function () { 3 var defaults = { 4 start: function (self, event) { }, 5 ...
给iframe添加点击事件
m0_53667674的博客
08-21 6826
解决iframe标签所处的盒子点击事件失效问题 给每个iframe标签设置样式，目的是时消除iframe标签里面的事件 #iframe1,#iframe2, #iframe3, #iframe4 { pointer-events: none; } 再给包裹iframe标签的盒子设置点击事件 HTML: <div class="box"> <div class="box1" style="background-color: rgba(0, 0, 0, 0);position:rela
监听在元素之外点击
qq_42651173的博客
07-30 976
使用场景举例： 1.接口返回一个数组对象，展示时每行固定显示n个，则可将返回的数组转成二维数组[[...n], [...n]...]的形式循环展示。
# 使用定位position无法触发click等事件的解决
最新发布
qq_39718255的博客
11-03 1002
该元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面层中的元素。但是如果它的子元素设置了" pointer-events" 的其他属性值，比如 auto，鼠标事件仍会监听这个子元素。底层有点击事件，但使用定位元素的子元素也有点击事件，这个时候需要给该元素设置为。pointer-events:none，该元素的子元素（有点击操作的）属性设置。底层有点击事件，使用定位的元素的子元素没有点击事件，属性值设为none即可。
解决了设置了position: absolute；点击没触发问题
FUFCY的博客
05-12 1546
点击没反应是权重不够，给设置了position: absolute;那个盒子样式加 z-index:999;就可以了
div设置position:fixed或者absolute绝对定位后，click事件失效问题
热门推荐
qq_一望损莓苔的博客
12-24 1万+
div后面需要点击的link或者标签放到绝对定位的div里面，然后将这个div的z-index设置得大于前一个绝对定位的div即可： z-index: 99; position: absolute;  
解决绝对定位div position: absolute,里面的icon不能点击的问题
qq_23727789的博客
07-27 3316
案例:一个表格,鼠标悬浮在表元上显示图标,单击编辑表元,图标要根据表元类型自动选择 原代码:if(!this.hoverDom){             this.hoverDom = this._property.doc.createElement('div');             this.hoverDom.setAttribute("id","hhdom");           ...
手机端CSS实现0.5px边框技巧与问题解析
为了解决这个问题，可以在父元素内添加一个新的绝对定位元素，用于接收点击事件。这个新元素的层级应高于伪类元素，并设置适当的点击事件处理函数。 ```html HELLO WORLD <div class="click-able" onclick=...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值