個(gè)人發(fā)現(xiàn)在做前端的時(shí)候經(jīng)常出現(xiàn)一些絕對(duì)定位、設(shè)置圖層高度的時(shí)候，但不同的圖層都有一個(gè)z-index的css屬性。

如何規(guī)劃這些圖層成了一個(gè)值得思考的問(wèn)題。今天設(shè)計(jì)了一套“夾層模型”的方案?？紤]到了很多情況。

直接來(lái)一張草稿圖：

上面的夾層模型適用于React、Vue這樣的前端框架，都有一個(gè)“一人之上，萬(wàn)人之下”的APP組件。

整個(gè)結(jié)構(gòu)分為APP層和頁(yè)面組件層。APP只有一個(gè)，但頁(yè)面有很多。



1~999：都是頁(yè)面內(nèi)比較正常的元素

1000~1999：彈窗的灰色遮罩背景之類(lèi)的組件，或者是能夠遮住全屏的加載動(dòng)畫(huà)

2000~2999：彈窗面板，比如突然彈出來(lái)一個(gè)界面提示框，登錄框、警告框之類(lèi)的

3000~3999：頁(yè)面鼠標(biāo)交互層：比如在這個(gè)界面，會(huì)有一個(gè)鼠標(biāo)點(diǎn)擊一下就能讓屏幕上多出來(lái)一個(gè)小桃心的上浮動(dòng)畫(huà)，這個(gè)小桃心就可以用絕對(duì)定位一個(gè)div來(lái)實(shí)現(xiàn)。但他的z-index必須很高，比彈窗組件還要高。

有了界面層，其實(shí)還應(yīng)該有個(gè)全局的APP層，APP層是完全高于界面層的一種層。和界面一樣，也有遮罩層、彈窗面板層和鼠標(biāo)交互層。為了方便記憶，直接設(shè)定APP層為四位數(shù)上萬(wàn)。

也就是10000~19999,20000~29999,30000~39999。

值得注意的是，該模型中不僅有向上的考慮，還有0以下的考慮，可以設(shè)定一個(gè)頁(yè)面背景層，讓z-index：-1

然后再設(shè)計(jì)一個(gè)APP通用背景層，z-index：-2。

優(yōu)點(diǎn)：

考慮相對(duì)全面，記憶方便：1000以?xún)?nèi)都是正常頁(yè)面，上千級(jí)別是頁(yè)面級(jí)別的東西，上萬(wàn)級(jí)別是APP級(jí)別的東西。

1xxx+是彈窗背景，2xxx+是彈窗，3xxx+是鼠標(biāo)交互層。

方案模型缺點(diǎn)：老瀏覽器的兼容性問(wèn)題

但在一般情況下，設(shè)置負(fù)值的z-index應(yīng)該盡量避免，因?yàn)樗赡軙?huì)引起一些層疊問(wèn)題和混亂。然而，如果確實(shí)需要設(shè)置負(fù)值的z-index，可以考慮將其限制在一個(gè)較小的范圍內(nèi)。一般建議最小的負(fù)值不要超過(guò)-1。
——chatGPT

建議盡量避免設(shè)置過(guò)大的z-index值，以避免可能出現(xiàn)的層疊順序混亂或其他問(wèn)題。通常來(lái)說(shuō)，一個(gè)較為保守的做法是將z-index值限制在較小的范圍內(nèi)，例如1000以下。
——chatGPT

IE6及一下對(duì)z-index負(fù)數(shù)會(huì)有奇怪行為

一些大廠的規(guī)范

谷歌（Google）：谷歌推薦使用自定義的z-index堆棧，通過(guò)定義一組常量變量來(lái)表示不同的層級(jí)關(guān)系，例如「Z_INDEX_DIALOG」、「Z_INDEX_NAVIGATION」等。

Facebook：Facebook的z-index規(guī)范建議使用較小的z-index值，將其限制在較小的范圍內(nèi)，通常為0-999。

Airbnb：Airbnb的z-index規(guī)范建議使用基于自然層次結(jié)構(gòu)的命名約定，例如「layer-modal」、「layer-popover」等，以便理解和維護(hù)。



最后，如果該模型有什么沒(méi)有考慮到的情況歡迎評(píng)論補(bǔ)充。