1. 程式人生 > >Cesium與PrimeNG結合導致介面元素被Cesium覆蓋的問題

Cesium與PrimeNG結合導致介面元素被Cesium覆蓋的問題

問題描述:接觸的專案開始的時候是用的PrimeNG的樣式,後來改為使用Cesium庫,出現了一個神奇的現象,在使用dialog時,dialog出現後會把整個的介面完全覆蓋,包括dialog;(因為公司的專案不方便截圖,大體的如下,就是dialog的對話方塊也在隱藏層的下面)
類似問題的圖片

解決思路:考慮到可能是因為在從PrimeNG轉換到Cesium時,遺漏了某些問題。在使用PrimeNG時為了顯示介面,將介面的z-index設定為了正值,在改為Cesium後,介面的z-index還是正值;

解決方法:首先是將dialog所在介面中,原先的z-index註釋掉,原先是正值是為了讓其顯示出來,後來在Cesium的css中將z-index設定為負值,同樣的實現效果,相當於A原先是設定的為正值,相比於B離得使用者更加的近,現在把B設定為負值,還是A離得使用者相對B更近,最後再在Cesium中將其position設定為relative,就可以實現dialog可以將背景介面隱藏,只顯示dialog的效果了。

最終的呈現效果如下:
最終的dialog效果圖