通过“css点击穿透“优化[移动端fixed导致的问题]

移动端position:fixed 解决方案，参考https://www.cnblogs.com/Megasu/p/4329430.html

CSS 解决z-index上层元素遮挡下层元素点击事件问题，参考https://www.cnblogs.com/shouke/p/12018403.html

 

-笔者做的优化:

【原理】在 出现问题的fixed定位元素 中设置一个absolute定位的子元素，给这个子元素"随便写点内容"并设置color透明(若想改位置可以最后设透明)，最后为了不影响页面交互，添加上pointer-events: none;

 

大致demo如下

<div style="position:fixed">

    
    我是navbar-header之类的东西
    <div style="position:absolute;pointer-events: none;color:transparent;">
    随便写点什么，为空不出问题也可以不写
    </div>
</div>

 

【题外话】

一些框架用js修改了style，导致页面上自己写的style行内样式被重写，

比如dialog弹出框自己整了个style="margin-top:0;"实际操作时是框架js修改后的style="margin-top:-233px;",

没法子用id定位就用class，总之精确定位该元素(都已经是手写style被重写的前提了，能手写style，这个div肯定是自己整的不是框架里没暴露的那种自动生成的html)，

然后,然后加!important咯，得比style优先级高，还能有啥法子，老老实实!important,不放心就再加个id选择器定位(纯心理慰藉了)。