如何在全局遮罩层下取消对某一元素遮罩并鼠标移入此div禁用滚动条

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

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

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

1. 另新建一个div，使div完全复制这块div内容，再优先级高于这个遮罩层就行了。但是这样有一个缺点，由于部分布局不同，这个遮盖的div可能不会完全的准确覆盖此div，达不到最理想的效果。
2. 第二种， 在源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;