vue樣式疊層z-index不起作用的解決方案
vue element 彈框樣式疊層問題
z-index不起作用
問題：當(dāng)點擊出現(xiàn)element彈框時，與當(dāng)前的頁面出現(xiàn)疊層問題（使用樣式z-index無果），導(dǎo)致彈框頁面無法輸入。
問題效果圖如下：
這里的兩個下拉框和echarts圖表與彈框修改密碼出現(xiàn)疊層問題。
解決思路：
本人一開始在層級上尋在了半天，未能解決問題（采用樣式z-index無果），后來發(fā)現(xiàn)是上個開發(fā)兄弟在兩個下拉框和echarts圖表均使用到了樣式
position: absolute;
導(dǎo)致無法實現(xiàn)。
實現(xiàn)方法：刪除到有關(guān)樣式，用新的方法對組件進(jìn)行布局。
最后完成的效果圖如下：
在這里只提供思路，代碼太繁瑣就不粘出來，希望能幫到大家噢！?。?/p>
z-index失效的原因
1、一般z-index的使用是在有兩個重疊的標(biāo)簽，在一定的情況下控制其中一個在另一個的上方出現(xiàn)。
2、z-index值越大就越是在上層。z-index：9999；z-index元素的position屬性要是relative，absolute或是fixed。
3、z-index在一定的情況下會失效。
①、父元素position為relative時，子元素的z-index失效。
- 解決：父元素position改為absolute或static
②、該元素沒有設(shè)置position屬性為非static屬性。
- 解決：設(shè)置該元素的position屬性為relative，absolute或是fixed中的一種。
③、該標(biāo)簽在設(shè)置z-index的同時還設(shè)置了float浮動
- 解決：float去除，改為display：inline-block；
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue打包chunk-vendors.js文件過大導(dǎo)致頁面加載緩慢的解決
這篇文章主要介紹了vue打包chunk-vendors.js文件過大導(dǎo)致頁面加載緩慢的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
一直對編譯原理的東西都有一種恐懼感，感覺太難了，看不懂，打開vue3源碼看到編譯相關(guān)的代碼，直接嚇退。不要擔(dān)心，小編今天帶你一文吃透Vue3編譯原理2023-02-02
淺談在Vue.js中如何實現(xiàn)時間轉(zhuǎn)換指令
這篇文章主要介紹了淺談在Vue.js中如何實現(xiàn)時間轉(zhuǎn)換指令，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要給大家介紹了關(guān)于vue組件入門知識的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue.js實現(xiàn)請求數(shù)據(jù)的方法示例
這篇文章主要給大家介紹了vue.js實現(xiàn)請求數(shù)據(jù)的方法示例，文中分別介紹了vue1.0和vue2.0的示例方法，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
Vue路由跳轉(zhuǎn)傳參或者打開新頁面跳轉(zhuǎn)問題
這篇文章主要介紹了Vue路由跳轉(zhuǎn)傳參或者打開新頁面跳轉(zhuǎn)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
為了方便大家寫代碼，Vue給大家提供了很多方便的修飾符，比如我們經(jīng)常用到的取消冒泡，阻止默認(rèn)事件等等，這篇文章將給大家分享Vue?中的常用的修飾符2022-10-10
用 Vue.js 遞歸組件實現(xiàn)可折疊的樹形菜單(demo)
通過本文給您演示一下如何有效地使用遞歸組件，我將通過建立一個可擴(kuò)展/收縮的樹形菜單的來一步步進(jìn)行。下面通過本文給大家分享用 Vue.js 遞歸組件實現(xiàn)可折疊的樹形菜單，需要的朋友參考下吧2017-12-12
vue項目中如何配置env環(huán)境的實現(xiàn)
本文主要介紹了vue項目中如何配置env環(huán)境的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕
這篇文章主要介紹了Vue3+Antd實現(xiàn)彈框顯示內(nèi)容并加入復(fù)制按鈕,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12