首先介绍一下我遇到的场景

如上图所示， 我想要添加更多内容跟着tips一起高亮， 可见遮罩层的 position:fixed; z-index: 2001已经遮挡住了

此时脑袋里面浮现了两种解决方案：

另新建一个div，使div完全复制这块div内容，再优先级高于这个遮罩层就行了。但是这样有一个缺点，由于部分布局不同，这个遮盖的div可能不会完全的准确覆盖此div，达不到最理想的效果。第二种， 在源div上操作，使其可以显示在遮罩层之上

这里我说一下第二种：

在此div上添加属性：

position: relative; z-index: 2000;// 这个值你自己定

这样优先级只要高于fixed就行了！

紧接着遇到了第二个问题

因为这个源div在页面的最下方，整体页面是有滚动条的。所以只要用户把鼠标移入这个div会导致用户只要滑动滚轮就会把页面滚走，而且滚到鼠标不在源div之上的时候就滚不下来了。

所以我们需要禁用掉滑动属性： 我前端使用的技术框架为Vue， 所以直接在标签上添加即可

@touchmove.prevent @mousewheel.prevent 最后的实现效果如图：

补充： 如果想让这个源div内容不可点击怎么办

那就添加一个absolute属性的同级div元素覆盖即可

width: 100%; left: 0; z-index: 23001; overflow: hidden; position: absolute; height: 100%; top: 0;

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。