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

最新推荐文章于 2024-10-09 11:16:57 发布

Ares_2020

最新推荐文章于 2024-10-09 11:16:57 发布

阅读量1.1w

点赞数 5

文章标签： HTML CSS JavaScript

本文链接：https://blog.csdn.net/qq_33736234/article/details/90341809

版权

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

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ares_2020

关注关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

浏览器兼容性问题及解决方案大汇总

qq_51179053的博客

07-03

3233

所谓浏览器兼容性问题：是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的效果。解决方法前端开发疆场需要检查浏览器的兼容性，这里推荐（Can I Use）这个查询网址。是一个针对前端开发人员制定的一个查询CSS、JS、HTML5、SVG，可以很好的保证网页在浏览器中的兼容性。CSS兼容问题1、不同浏览器的标签默认的内外边框不同。解决方案 {margin:0;padding:0}/** * 该文件用于清除浏览器样式 */ html, body, div, span, applet, objec

（Django）Web网页制作HTML文件时遇到的问题集合

weixin_47401619的博客

06-20

1175

前端知识点

2 条评论您还未登录，请先登录后发表或查看评论

position 绝对定位的问题

原来注册了那么多年

08-26

425

div无法对父对象绝对定位。但是发现无论怎么调整都是针对body定位，郁闷！看了下CSS手册，也没发现有什么不对。到网上查了下，发现了这么一句话：absolute 脱离文档流，通过 top,bottom,left,right

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

爬楼梯的前端小白的博客

04-06

2444

问题场景：form设置了绝对定位，form里面有个按钮，按钮注册了onclick事件，发现点击按钮没反应；问题解决：在chrome中打开该网页，鼠标移到这个按钮上右键检查，发现form后面定义的html元素在该按钮的上面层，由此可知，我们点击按钮，实际上并没有点击到按钮...... 只需在form绝对定位的样式里添加一行代码，让按钮浮上来： position: absolute; z-index: 99;//添加该行代码即可转载自:html元素设置position:absolut.

html 之 relative 和 absolute

最新发布

u010194271的博客

10-09

555

结合 relative 和 absolute 的工作原理当一个父元素使用 relative 定位，并且其子元素或伪元素使用 absolute 定位时，子元素会根据父元素的边界进行定位，而不是根据视口或文档流。这个模式非常常见，用于创建复杂的布局效果。

绝对定位后的元素无法触发点击事件

qq_45832807的博客

08-12

4140

解决方法可以通过给绝对定位的层多加一个样式：" 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

3144

css设置position:absolute绝对定位后，点击事件不起作用

前端给某个元素加上position：absolute导致input框无法点击

m0_46544598的博客

02-10

562

可能是因为元素绝对定位之后把input框藏在其他元素的后方了。具体解决办法：给加绝对定位的同时加上z-index层级高一点。我这儿加的是3，可以打开f12慢慢调，建议不要层级过大。解决办法：把input框置顶。

【IE bug 解决办法】IE下（IE10及以下）当元素为absolute定位时，点击事件失效的解决办法

snow_finland的专栏

06-26

4523

不如下面这个例子： 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:

手机端CSS实现0.5px边框技巧与问题解析

为了解决这个问题，可以在父元素内添加一个新的绝对定位元素，用于接收点击事件。这个新元素的层级应高于伪类元素，并设置适当的点击事件处理函数。 ```html HELLO WORLD <div class="click-able" onclick=...

web前端入门到实战：元素显示隐藏的9种思路

web前端开发教程htmlcssjs

01-06

386

在网页制作中，元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的9种思路 display 对于元素显隐来说，最常见就是display:none | display:block，但是使用这种方法有个问题，元素的display属性在隐藏前并不都是block，还有可能是inline、inline-block等注意：如果要适用于任何元素需要提前储存元素的display值 <button id...

HTML基础学习

qq_45600095的博客

12-16

1061

alt+鼠标左键增加光标 alt+鼠标拖选 Ctrl+alt+上键 Ctrl+e选中相同词进行修改 alt+鼠标左键单击转到定义地方 Ctrl+alt+左键把代码打开在另一侧，方便查看 alt+左方向键转到鼠标光标的上一个位置 F4切换到不同的错误之处合并下一行： Ctrl + Alt + J 剪切光标所在行 Ctrl + x 复制光标所在行 Ctrl + c 总结 bootstrap网址 https://www.bootcss.com/

给元素加上 position: absolute 之后无法点击解决办法

ljinest

09-09

6117

这种情况大多数是因为元素绝对定位之后被藏在其他元素的后方了。就和ppt中的元素被置底一样，但是html中有些情况你还是能看到你的元素问题描述：某个点击元素被加上position: absolute属性之后发现没办法点击到了。原因分析：这种情况大多数是因为元素绝对定位之后被藏在其他元素的后方了。就和ppt中的图片被置底一样，但是html中有些情况你还是能看到你的元素，这种情况下我们要把这个元素置顶。解决方案：打开开发者工具，选择到你的元素，给这个元素的element style加上一个z-

元素开启绝对定位后点击事件失效解决办法

努力向前，成长可见

02-09

3761

元素开启定位后点击事件失效是因为被上层元素遮挡，点击到的元素此时不是绑定了事件的元素，解决的办法是提升该元素的层级 position: absolute; z-index: 99;

vue 及 js 微信中页面输入框被键盘顶上去之后，点击域错误弹出框fixed absolute 定位的输入框键盘弹出导致点击域失效解决办法

lizhen_software的博客

08-13

628

造成这种问题的原因是body没有复位，所以把body 复位就可以了。解决思路：1、input获取焦点的时候记住当前滚动的位置，2、input失去焦点的时候滚动到之前的位置。（亲测有效）。附vue 代码，其他框架可以依据该思路修改。 PageScroll:0,// 位置这个在data 里面定义变量 inputLoseBlur() { setTimeout(() => { ...

html 页面定位失效,html – CSS相对定位不起作用

weixin_34231219的博客

06-03

455

出于某种原因,我无法将我的图像定位到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

1174

这是由于百度地图在移动端屏蔽了click事件，在网上找到一种方法，利用touchClick方法来模拟click事件，代码如下（需要JQ插件）： 1 //给jquery添加touchClick方法 2 (function () { 3 var defaults = { 4 start: function (self, event) { }, 5 ...

给iframe添加点击事件

m0_53667674的博客

08-21

6721

解决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

父级元素设置了display:flex，子集元素设置position:absolute两者冲突吗

06-08

不一定冲突。如果父级元素设置了 display:flex，子元素设置了 position:absolute，子元素将会脱离文档流并相对于最近的已定位祖先元素定位。如果父级元素是已定位元素，子元素将相对于父元素定位。如果父级元素没有定位，子元素将相对于文档定位。但是，子元素将不再受到父级元素的 flex 布局影响，也就是说，子元素的位置不会被 flex 布局所控制。所以，如果要在 flex 布局中控制子元素的位置，最好不要使用 position:absolute。