首頁 > 網際網路

怎麼讓彈出的div不被後面彈出的div遮擋住

2019-12-12 18:43:40

我們在做頁面開發時,有時候需要做一些彈出div的邏輯,但如果你有多個div需要彈出,有可能後面彈出的div會把前面彈出的div遮擋住的。怎麼解決呢?如果你某個div優先順序比較高,彈出來後希望不被其他的div遮擋住。


1

由於需要用到jquery來操作,我們先引入jquery指令碼。


2

在html裡,我們有二個彈出層的div,預設情況下,第二個彈出的div會把第一個彈出的div遮擋住的。


3

這是預設的彈出層程式碼。


4

如果我們為特定的div設定彈出層時,不會被其他的div遮擋住,我們可以為這個div設定一個z-index,只要這個值比其他的div的值大,就不會被遮擋住了。


5

當然,如果你需要動態的為某個div彈出層設定,不讓被其他div遮擋,我們可以在彈出程式碼裡新增這個樣式,就是在彈出前,為所要彈出的div設定一個較大的z-index值。


6

設定後,效果如圖,現在這個div是有最大的z-index值的,後面彈出的div是遮擋不了它的。



IT145.com E-mail:sddin#qq.com