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)行布局。
最后完成的效果圖如下：
在這里只提供思路，代碼太繁瑣就不粘出來，希望能幫到大家噢?。?！
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.js上傳圖片到阿里云OSS存儲的方法示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Vue3 組件間通信之mitt實現(xiàn)任意組件間通信的步驟
mitt 主要有4個API：emit（觸發(fā)某個事件）、on（綁定事件）、off（解綁某個事件）、all（獲取所有綁定的事件）,這篇文章主要介紹了Vue3 組件間通信之mitt實現(xiàn)任意組件間通信,需要的朋友可以參考下2024-05-05
vue3中使用keepAlive緩存路由組件不生效的問題解決
這篇文章主要介紹了vue3中使用keepAlive緩存路由組件不生效的問題解決,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-06-06
這篇文章主要介紹了一文徹底搞懂Vue的MVVM響應(yīng)式原理，vue則是采用發(fā)布者-訂閱者模式，通過Object.defineProperty()來劫持各個屬性的getter和setter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)2022-06-06
這篇文章主要介紹了解決vue3項目中el-menu不兼容SSR問題,需要的朋友可以參考下2023-12-12
webpack + vue 打包生成公共配置文件（域名） 方便動態(tài)修改
這篇文章主要介紹了webpack + vue 打包生成公共配置文件（域名） 方便動態(tài)修改,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
Vue是一個以數(shù)據(jù)驅(qū)動、組件化的前端框架,其中組件化是Vue中較為重要的概念之一,組件之間的通信則成為Vue中較為普遍的需求,下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值不能實時更新的解決方法,需要的朋友可以參考下2023-05-05
組件(Component)是 Vue.js 最強(qiáng)大的功能之一。 組件可以擴(kuò)展 HTML 元素,封裝可重用的代碼。下面這篇文章主要給大家介紹了關(guān)于Vue.js組件間循環(huán)引用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-12-12
Vue Element前端應(yīng)用開發(fā)之組織機(jī)構(gòu)和角色管理
本篇文章繼續(xù)深化Vue Element權(quán)限管理模塊管理的內(nèi)容，介紹組織機(jī)構(gòu)和角色管理模塊的處理，使得我們了解界面組件化模塊的開發(fā)思路和做法，提高我們界面設(shè)計的技巧，并減少代碼的復(fù)雜性，提高界面代碼的可讀性，同時也是利用組件的復(fù)用管理。2021-05-05
這篇文章主要介紹了Vue.js實現(xiàn)可排序的表格組件功能,涉及vue.js事件響應(yīng)、元素動態(tài)操作、排序、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02