css為盒模型的布局提供了三種不同的定位方案：
其中最後一種定位方案將乙個元素從常規流中移除，完全依賴開發者來確定元素顯示的位置。
通過賦予top, left, bottom 和 right 屬性值，可以在二維平面上放置元素，此外css也允許使用z-index屬性以在第三維上放置元素。
表面上，z-index看起來像是乙個簡單的屬性。 你可以設定各種值來決定某乙個元素會被置於第三維的何處，然後就完成了。 實際上，這其中還有許多許多可以研究的內容，包括確定哪一類元素會被放置到其他元素上的一些規則。
不如讓我們從基礎開始，以確保我們對此能有共同的理解。隨後，我們會談一些關於層疊的內容，以更好地理解在z-index的背後到底發生了什麼。
我相信你一定對三維座標空間很熟悉。 我們有x軸通常用來表示水平位置，y軸來表示垂直位置，還有z軸來表示在紙面內外方向上的位置，或者說在本文的語境下，螢幕內外方向上的位置。
三維座標空間
由於螢幕是乙個二維平面，因此我們並不是真正地看到了z軸。 我們說看到z軸，其實是通過透視，通過元素展現在與其共享二維空間的其他元素的前面或者後面來看到的。
要確定沿著這z軸元素是如何分布的，css允許我們對z-index屬性設定三種值。
目前，先讓我們關注在整數值上。 整數值可以是正值，負值，或0。數值越大，元素也就越靠近觀察者。 數值越小，元素看起來也就越遠。
如果有兩個元素放在了一起，佔據了二維平面上一塊共同的區域，那麼有著較大z-index值的元素就會掩蓋或者阻隔有著較低z-index值的元素在共同區域的那一部分。
我想上面的邏輯非常易於理解，而且很有可能和你的預期是一致的。 儘管如此，現在還是有一些問題懸而未決、等待解答。
要回答這些問題，我們需要進一步地理解z-index是如何工作的，尤其是層疊上下文，層疊層，以及層疊次序這些概念。
層疊上下文和層疊層會有一些難以概念化，所以暫時讓我們想象一張桌子，上面有一堆物品。 這張桌子就代表著乙個層疊上下文。 如果在第一張桌子旁還有第二張桌子，那第二張桌子就代表著另乙個層疊上下文。
層疊上下文1 (stacking context 1)是由文件根元素形成的。 層疊上下文2和3 (stacking context 2, 3) 都是層疊上下文1 (stacking context 1) 上的層疊層。 他們各自也都形成了新的層疊上下文，其中包含著新的層疊層。
現在想象在第一張桌子上有四個小方塊，他們都直接放在桌子上。 在這四個小方塊之上有一片玻璃，而在玻璃片上有一盤水果。 這些方塊、玻璃片、水果盤，各自都代表著層疊上下文中乙個不同的層疊層，而這個層疊上下文就是桌子。
每乙個網頁都有乙個預設的層疊上下文。 這個層疊上下文（桌子）的根源就是html元素。 html標籤中的一切都被置於這個預設的層疊上下文的乙個層疊層上（物品放在桌子上）。
當你給乙個元素賦予了除 auto (自動) 外的z-index值時，你就建立了乙個新的層疊上下文，其中有著獨立於頁面上其他層疊上下文和層疊層的層疊層。 這就相當於你把另一張桌子帶到了房間裡。
最容易理解層疊次序的方法就是用乙個簡單的例子來說明，這個例子會簡單到我們甚至暫時不考慮定位元素。
想象一張非常簡單的網頁。 除了預設的,,之類的元素，你會發現在每個頁面上都有那麼乙個元素。 在你的css檔案中，你給html元素設定了藍色的背景顏色。 對於div元素，你設定了寬高和紅色的背景顏色。
那麼在你載入頁面的時候，你會期望看到什麼呢？
希望這不會花你很多時間來想象出一幅幾乎全是藍色的螢幕，除了上面有一塊紅色的方塊，這個方塊有著你設定的寬和高。 這個紅色方塊應該會出現在頁面的左上角，除非你比較有想象力，給這個方塊設定了額外的css來把它顯示在其他地方。
你也許會想「那又怎樣呢？這不是很明顯嘛」，但是不那麼明顯的是為什麼你會在藍色的背景上看到有乙個紅色的方塊。 為什麼你會看到div元素在html元素上方？ 原因就是他們都遵循著層疊次序的規則。
比如在這個簡單的例子中，規則規定常規流（例子中的div）中的子塊會被置於根元素（例子中的html元素）的背景和邊框之上。 你會看到div元素在最上面是因為它在更高的層疊層上。
儘管上面給出的例子只包含了乙個兩級的層疊，事實上在乙個層疊上下文中一共可以有7種層疊等級，列舉如下：
背景和邊框—— 形成層疊上下文的元素的背景和邊框。 層疊上下文中的最低等級。
負z-index值—— 層疊上下文內有著負z-index值的子元素。
塊級盒—— 文件流中非行內非定位子元素。
浮動盒—— 非定位浮動元素。
行內盒—— 文件流中行內級別非定位子元素。
z-index: 0—— 定位元素。 這些元素形成了新的層疊上下文。
正z-index值—— 定位元素。 層疊上下文中的最高等級。
層疊上下文中的七種層疊等級
這七個層疊等級構成了層疊次序的規則。 在層疊等級七上的元素會比在等級一至六上的元素顯示地更上方（更靠近觀察者）。 在層疊等級五上的元素會顯示在等級二上的元素之上。 在...上的元素會... 好吧，我想你已經明白了。
我在第一次碰上上面的層疊次序規則時想到一些事情。 如果你只看層疊等級2, 6, 7（那些提到了z-index的等級），很有可能你會發現這和你對於z-index的理解相符。 正z-index值比0 z-index值更高一層，0 z-index值又比負z-index值高一層。 儘管這也很有可能是我們大部分人停止思考關於這些層疊層的地方。
在見到這些規則之前我還以為一切其他東西都和0值z-index是一樣的呢。很顯然事實並非如此。 事實上，大多數的一切都比z-index為0的層疊等級低。
另外同樣有趣的是非定位元素分散在四個不同的層疊等級上。 不過當你思考起來就會發現這有道理。 如果所有的非定位元素都在同一層疊等級上，那麼我們就不會看到文字（行內盒）在div上了（塊級盒）。
文章裡我多次提到建立形成新的層疊上下文。 當你將除了auto以外的z-index值賦給乙個元素，你就建立了乙個新的層疊上下文，它獨立於其他的層疊上下文。
讓我們再次把桌子當作層疊上下文來考慮。 之前，我們有一張桌子，桌子上有四個方塊、一片玻璃和一盤水果。 想象在這第二張桌子上也有四個同樣大小的方塊，方塊上有一片玻璃，不過沒有水果盤。
你一定會想第一張桌子上的水果盤是房間裡最高的東西了。 因為它在最高的層疊層上（有著最大的z-index值）。 但要是我們把第一張桌子和這張桌子上的一切東西放到地下室去呢？ 那麼水果盤現在就會比所有在第二張桌子上的東西低了，因為第一張桌子本身已經被移到比第二張桌子低的層疊層去了。
對於網頁上的定位元素來說也是同樣。 考慮如下網頁和樣式。div.two會顯示在div.four上面還是下面呢？
html:
css:
div .one, .two, .three, .four .one .two .three .four儘管div.two有著更大的z-index (100)，它實際上比同一頁面上的div.four (z-index為50) 位置更低。 你可以在下面的圖中看到上面**的結果。 黑色和黃色的邊框表示著每個元素所處的不同的層疊上下文。
由於div.two被包含在div.one中，它的z-index值也是相對於div.one的層疊上下文來說的。 事實上，我們真正得到的是如下結果：
我們所做的其實是把div.one和它所包含的一切放在了div.four之下。 不管我們給div.one中的元素設定了什麼z-index值，他們永遠都會顯示在div.four的下面。
如果你像我一樣，這可能在你處理z-index的時候已經坑了你一兩次。 希望這些例子能幫助你釐清為什麼有時乙個有著較大z-index值的元素卻顯示在只有較小z-index值的元素的後面。
當你初次遇到z-index時，它就像乙個非常簡單、易於理解的屬性。 它的值代表著在朝向螢幕內外的軸上的位置，沒有別的。
而深入**z-index揭示出在z-index的背後，還發生了許多事情。 包括層疊上下文、層疊層和確定哪個元素在上哪個元素在下的層疊次序規則。
定位元素還會產生新的層疊上下文，而這整乙個層疊層會顯示在另乙個層疊上下文中的所有層疊層的上面或者下面。
CSS學習筆記之 z index屬性》
z index是針對網頁顯示中的乙個特殊屬性。因為顯示器是顯示的圖案是乙個二維平面，擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z index屬性來表示z軸的區別。表示乙個元素在疊加順序上的上下立體關係。由此圖可以顯而易見的，z index越大越靠前，z i...
前端學習筆記之 Array
1.array 關於陣列的宣告方式 1 var arr new array 3 長度為3的空陣列 2 var arr new array 1,2,3,4 直接初始化 3 var arr 1,2,3,4 這樣直接初始化也行.注意 讀取陣列時若超出範圍則返回undefined.關於arr.length這...
前端學習筆記
前端 做網頁 靜態網頁 動態的web應用 前後端分離的單頁應用 資料 json ajax html css js jquery ajax 開發工具notepad hbuilder vscode webstorm 瀏覽器 谷歌 firefox edge 什麼是html hypertext makeup...