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