使div浮動層顯示在Select元件上面

2021-09-05 19:34:31 字數 1046 閱讀 5124

一、發現問題

問題:綠色的浮動層被select元件「咬掉了一塊」。

**部分:浮動層

汽車化妝品

房地產

日用品

二、找到方法

上網搜尋了一下之後發現,這個是html語言的通病,只能通過某些優先順序更加高的元件來遮蓋。

在csdn社群裡看到有人給出解決方案:

div被select擋住,是乙個比較常見的問題。  

有的朋友通過把div的內容放入iframe或object裡來解決。  

可惜這樣會破壞頁面的結構,互動性不大好。  

這裡採用的方法是:  

雖說div直接蓋不住select  

但是div可以蓋iframe,而iframe可以蓋select,  

所以,把乙個iframe來當作div的底,  

這個div就可以蓋住select了.  

1"iframe   做為層的載體"後,  

層與主頁面的互動是視窗間的互動  

2「用乙個iframe當div的底」後,  

層與主頁面的互動是視窗內的互動  

另外,對於方法1,  

層的大小變化就會要求iframe的大小隨著變化  

從主頁面到這個層會導致window的blur.  

對於方法2,  

只是在原有的div前加上這一句  

試用大家的方法之後發現還是有一點小問題,出來的是白色浮動,而不是本來應該出來的綠色浮動層。

問題依然存在:

三、除錯完成

最後發現應該稍作修改,一下**是最終的方案:

1、在iframe的style裡面一定要加上z-index而且要設為-1,這樣它就不會把原來的div層也一起覆蓋掉。

2、把放在div層的上面就可以了。

汽車化妝品

房地產

日用品

問題解決:

使div浮動層顯示在Select元件上面

這個也是現學現賣了,沒有什麼特好的方法,先看一下博主的這個吧 一 發現問題 問題 綠色的浮動層被select元件 咬掉了一塊 部分 浮動層 汽車化妝品 房地產日用品 二 找到方法 上網搜尋了一下之後發現,這個是html語言的通病,只能通過某些優先順序更加高的元件來遮蓋。在csdn社群裡看到有人給出解...

使div浮動層顯示在Select元件上面

這個也是現學現賣了,沒有什麼特好的方法,先看一下博主的這個吧 一 發現問題 問題 綠色的浮動層被select元件 咬掉了一塊 部分 浮動層 汽車化妝品 房地產日用品 二 找到方法 上網搜尋了一下之後發現,這個是html語言的通病,只能通過某些優先順序更加高的元件來遮蓋。在csdn社群裡看到有人給出解...

如何讓浮動的div層顯示在select元件的上面

一 發現問題 問題 浮動層被select元件覆蓋住一部分。部分 浮動層 程式 軟體硬體 二 找到方法 上網搜尋了一下之後發現,這個是html語言的通病,只能通過某些優先順序更加高的元件來遮蓋。在csdn社群裡看到有人給出解決方案 引用內容 div被select擋住,是乙個比較常見的問題。有的朋友通過...