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