vue+element——父級元素fixed，遮罩會在上方

前言

　　這種場景仍是蠻場景的

　　一個共用的head組件，組件裏面一般是當前系統登陸帳號名 退出登陸 修改密碼這樣的彈框

　　可是如今我又想head不跟着main內容上下滑動。因此用了fixed 定位。

　　問題來了，head組件的下拉菜單 修改密碼彈框的遮罩在上方了，該如何解決呢？

 

需求

　　element的彈框的遮罩在上方，彈框的遮罩Z-index 是自增加的，因此改變彈窗的層級是沒有用的

　　第一種方法：把下菜單剝離出來，成一個共組件，而後用定位來再head的組件的位置

　　缺點：每一個頁面都要改，不太好（懶）

　　第二方法：我以爲這個是比較常見的問題，我就在element的github上面找到了同款問題

　　dialog 有兩個屬性，因此 遮罩不插入body元素上，遮罩插在父元素就行了

 

開始是這樣的

　　

而後代碼改爲這樣子

　　

　　

最終的效果是這樣的

　　

 

 nice 完美的解決。