• 欢迎来到八本那年博客,很高兴可以在对的年纪遇见对的你!
  • 因主题导致QQ登录的小伙伴在评论中显示默认头像,请去个人中心重新上传头像即可。

CSS穿透:让div置于顶层但不影响下方元素点击

代码笔记 barben 4年前 (2019-10-22) 36151次浏览 2个评论

案例分析

页面有一个写着版权信息的div,对他设置了fixed定位在底部。
当我每次打开控制台的时候,这个div会把”立即登录”按钮给遮住。
因为页面高度发生变化后,fixed定位会使得div上移,正好就遮挡住了下面的按钮。


我现在就得实现:div置于顶层显示但又不遮挡住下方的元素

使用 pointer-events 穿透

你只需要把下面的样式给这个div使用即可!

/* 元素遮罩层不遮挡下方元素的代码 */
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;

八本那年博客,我们一直都在
如作者未注明既为原创文章,转载请注明本文链接及出处
CSS穿透:让div置于顶层但不影响下方元素点击 - https://www.barben.cn/code/626.html
喜欢 (9)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体

在八本那年评论需要带上你的昵称和邮箱哦!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
成功捕捉到了 2 只稀有精灵
  1. 非技术的路过。
    repostone2019-11-04 16:07 回复