vue樣式疊層z-index不起作用的解決方案

更新時(shí)間：2022年04月29日 11:12:14 作者：小于林等于二

這篇文章主要介紹了vue樣式疊層z-index不起作用的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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)行布局。

最后完成的效果圖如下：

在這里只提供思路，代碼太繁瑣就不粘出來，希望能幫到大家噢?。。?/p>

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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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