一个元素位于另一个元素之上，点击上面的元素引发下面元素事件操作

晨光熹微fd

于 2022-07-10 17:43:11 发布

阅读量1.1k

点赞数

文章标签：大数据 javascript html

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/125708496

版权

这篇博客介绍了如何通过CSS的pointer-events属性，使得一个覆盖在文本输入框之上的div元素，能够透明地传递点击事件到下方的文本输入框，从而实现点击‘上面的内容盒子’时触发文件上传操作。这种方法对于创建交互式的UI布局非常有用。

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

一个元素位于另一个元素之上，点击上面的元素引发下面元素事件操作

<body>
  <!-- 此布局为： 上面内容盒子覆盖在了上传文本区域之上-->
  <!-- 想要点击‘上面盒子内容’的时候，触发文本上传操作，则需要在覆盖文本区域添加pointer-events: none;属性 -->
  <div style="position: relative;">
    <input type="file" style="opacity: 0;">
    <div style="position: absolute; top: 0; pointer-events: none;" >上面的内容盒子</div>
  </div>
</body>