前端項目中有簡潔的z-index的約束規則（管理方案）嗎？

隨著項目變大團隊人員變多，多人協作開發時候沒有一個良好的z-index規則約束，導致某些條件下觸發的浮層遮罩有問題，問題不難解決但是多人協作的時候確實很痛苦，正在尋求解決方案，謝答！

附上github中找到的一份解決辦法，與大家分享先：WEB三層設計結構------管理z-index的神方案 · Issue #2 · lijinghust/lijinghust.github.com · GitHub

---

建議你看看這篇文章：Sass管理複雜的z-index_preprocessor, sass, scss, z-index 教程_w3cplus

---

退一步說，一個網頁的z-index管理得越少越好管理，多數情況下讓元素自然的flow就可以了，需要管理的是局部元素，比如popup層，播放器的控制項層等等，管理的太多一是沒有必要，二其實更容易亂。

---

哈哈哈哈哈。不邀自來。

大漠朋友上面的鏈接方法就很好了。如何解決

那麼我就說說怎麼避免這個問題，怎麼理解這個問題，這個問題，我是聽張鑫旭大大解答的（好久了，主要看的視頻，應該是秒客網z-index的深入理解。= =）。是這樣的。為什麼那麼多人喜歡用z-index？因為能快速解決問題，所以只要發現不顯示，額，給個z-index:99 不顯示 999999 是不是。想過沒有，因為大家對主要的原因還是對理解層疊上下文以及層疊順序這些概念都不了解。只要使用了定位元素，那麼肯定離不開z-index。那麼z-index到底怎麼理解。

z-index遵循下面這個圖的。

所以，我們就不需要考慮為什麼float元素比快元素還低些？ 因為內聯元素都是內容，浮動是布局啊，內容是肯定顯示在最前面的！！內容重要嘛~~

張大大的二個原則：

1. 誰大誰上：當具有明顯的層疊水平標示的時候，如識別的z-indx值，在同一個層疊上下文領域，層疊水平值大的那一個覆蓋小的那一個。通俗講就是官大的壓死官小的。
2. 後來居上：當元素的層疊水平一致、層疊順序相同的時候，在DOM流中處於後面的元素會覆蓋前面的元素。

怎麼理解，上面的圖，誰大誰上，比如我calss="aa"屬性z-index：1 .class="bb" z-index:0； 那麼 class="aa"塊的內容就在z-index:0前面 ，多看。就明白了。後來居上就更加簡單了，當元素的層疊水平一致、層疊順序相同的時候，覆蓋前面的元素。怎麼理解？你寫的代碼，後面顯示的就覆蓋前面的。和自己的css樣式一樣，開始寫了個比如font-size:16px 然後還寫了個font-size:18px ，那麼這個字體大小就是18px。

-----------------------------------------------------------------------------------------------------------------------------

那麼理解了 層疊關係，那麼就避免了很多瞎用z-index的原因。但是，哎喲，這個項目負責的人太多了，我也不知道z-index：？？？99 999 999999.應該怎麼辦。其實張大大說過，他用z-index有個原則 z-index:不大於2！不大於2！遵循以上原則，可以做到！實在是項目需要修改，找不到，那麼可以通過js找出最大的z-index，然後再次基礎上加+1，就可以了。（大漠朋友的鏈接不錯。

------------------------------------------------

來來來，給你們找來了鏈接，自己看，深入理解CSS中的層疊上下文和層疊順序 ? 張鑫旭 哈哈哈哈哈。

---

在我們的項目中（使用less），是這樣管理全局的z-index:

// Z-Index Scale (private vars)
// --------------------------------------------------
@zIndex-1: 100;
@zIndex-2: 200;
@zIndex-3: 300;
@zIndex-4: 400;
@zIndex-5: 500;
@zIndex-6: 600;
@zIndex-7: 700;
@zIndex-8: 800;
@zIndex-9: 900;
@zIndex-10: 1000;

// Z-Index Applications
// --------------------------------------------------
@zIndex-1--screenForeground: @zIndex-1;
@zIndex-1--followUpVisibility: @zIndex-1;
@zIndex-1--prlWelcome: @zIndex-1;
@zIndex-1--appImageDropdown: @zIndex-1;
@zIndex-1--surfaceUnder: @zIndex-1;
@zIndex-1--blockGroup: @zIndex-1;

@zIndex-2--surfaceOver: @zIndex-2;
@zIndex-2--imagePickerControl: @zIndex-2;
@zIndex-2--collectionCardButton: @zIndex-2;
@zIndex-2--blockGroupButtonGroup: @zIndex-2;
@zIndex-2--blockGroupFocused: @zIndex-2;
@zIndex-2--blockGroupOverlay: @zIndex-2;

@zIndex-3--caption: @zIndex-3;
@zIndex-3--blockInsertControl: @zIndex-3;

@zIndex-5--figureOverlay: @zIndex-5;
@zIndex-5--highlightMenu: @zIndex-5;
@zIndex-5--metabar: @zIndex-5;
@zIndex-5--profileAvatar: @zIndex-5;
@zIndex-5--noteRecommendations: @zIndex-5;
@zIndex-5--collectionLogo: @zIndex-5;

@zIndex-6--matterLogo: @zIndex-6;
@zIndex-6--editorSidebar: @zIndex-6;
@zIndex-6--navOverlay: @zIndex-6;

@zIndex-7--nav: @zIndex-7;

@zIndex-8--transitioningContainer: @zIndex-8;
@zIndex-8--panel: @zIndex-8;
@zIndex-8--butterBar: @zIndex-8;
@zIndex-8--loadingBar: @zIndex-8;
@zIndex-8--zoomOverlay: @zIndex-8;

@zIndex-9--zoomOverlayTarget: @zIndex-9;
@zIndex-9--navOverlayTouch: @zIndex-9;
@zIndex-9--overlay: @zIndex-9;
@zIndex-9--dialog: @zIndex-9;
@zIndex-9--tooltip: @zIndex-9;

@zIndex-10--dev: @zIndex-10;


來源是這篇文章： https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06#.gpvrebnnf

裡面推薦了一些使用less的規範，目前用在手頭的項目中還是挺方便的。

另外bootstrap 的源代碼中也有類似的管理：

//-- Z-index master list
//
// Warning: Avoid customizing these values. They"re used for a bird"s eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.

@zindex-navbar: 1000;
@zindex-dropdown: 1000;
@zindex-popover: 1060;
@zindex-tooltip: 1070;
@zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040;
@zindex-modal: 1050;


---

看下bootstrap的源代碼

---

推薦閱讀：