前言
这种场景还是蛮场景的
一个共用的head组件，组件里面通常是当前系统登录账号名 退出登录 修改密码这样的弹框
但是现在我又想head不跟着main内容上下滑动。所以用了fixed 定位。
问题来了，head组件的下拉菜单 修改密码弹框的遮罩在上方了，该如何解决呢？
需求
element的弹框的遮罩在上方，弹框的遮罩Z-index 是自增长的，所以改变弹窗的层级是没有用的
第一种方法：把下菜单剥离出来，成一个共组件，然后用定位来再head的组件的位置
缺点：每个页面都要改，不太好（懒）
第二方法：我觉得这个是比较常见的问题，我就在element的github上面找到了同款问题
dialog 有两个属性，所以 遮罩不插入body元素上，遮罩插在父元素就好了
开始是这样的
然后代码改成这样子
最终的效果是这样的
nice 完美的解决。