你所不知道的z-index的用法
在開始今天的內容之前，先讓我們先來看看下面一段程式碼：
<style type="text/css"><br> #div1,#div2{<br> width:200px;<br> height:200px;<br> background-color:red;<br> position: relative;<br> z-index:1;<br> }<br> #div2{<br> background-color:green;<br> z-index:0;<br> }<br> #div1_1,#div2_1{<br> width:100px;<br> height:100px;<br> background-color:black;<br> }<br> #div1_1{<br> position:relative;<br> z-index:-100;<br> left:80px;<br> top:140px;<br> }<br> #div2_1{<br> background-color:yellow;<br> z-index:999;<br> position: relative;<br> left:160px;<br> top:-50px;<br> }<br><br></style><body><br><div id="div1"><br> 我是div1<br> <div id="div1_1"><br> 我是div1_1<br> </div><br></div><br><div id="div2"><br> 我是div2<br> <div id="div2_1"><br> 我是div2_1<br> </div><br></div><br></body>
'
???excuse me?為什麼div2_1的z-index值都999了還是比div1的元素層級低？ div1_1的z-index值都為-100了還比div1高呢？不要著急，且聽我慢慢道來。
首先我們對一個東西不熟悉的時候要先弄清楚三個東西：1.這個東西是什麼？ 2.有什麼用？ 3.怎麼用？
我們下面也是按這三個步驟來講解這個z-index屬性。首先第一，二點，這個東西是什麼？ z-index其實是css中的一個普通屬性，主要用於設定元素的堆疊順序，直白點就是你的網頁如果有三個div重合在一起，需要按照一定順序從底層顯示到最上層，你該怎麼辦，因為在一般的網頁開發中我們是二維的，css引入這個屬性也是為了幫助我們更好的佈局。
其次我們開始看看這個東西怎麼用，下面我先給大家介紹一些概念性的東西：
1.z-indeex屬性設定元素的堆疊順序，擁有較高的堆疊順序的元素總是會處於堆疊順序較低的元素前面
2.對於同級元素，預設或position:STATIC情況下文檔流後面的元素會覆蓋前面的
3.對於同等級元素，position不為static且z-index存在的情況下z-index大的元素會覆蓋z-index小的元素，及z-index越大優先級越高
4.ie6/7下position不為static,且z-index不存在是z-index為0，除此之外的瀏覽器z-index為auto;
5.z-index為auto的元素不參與層級關係的比較，由向上遍歷至此z-index不為auto的元素來參與比較
注意：如果你設定了position:static和沒有設定position的元素是一樣的，對堆疊層級沒有影響（後面範例不再說明了，後面的position預設無static的情況）
下面我以幾個實例來說明：
1.沒有z-index和 position參與時元素的堆疊順序：
上面兩個div的堆疊法則就是後面的堆疊層級是比前面高的，就是說如果你用負margin將div2移到div1上，重合的部分是顯示的 div2而不是div1。然後有同學就會問了，那我在div2後面再加一個div3呢，這時不管你後面還有多少個div，層級都跟div2相同，不會再比div2高了
2.在有position參與但無z-index參與的情況
eg：
<style type="text/css"><br> /*定位规则,如果加position堆叠顺序优先，所以A此时变在B上面*/<br> #a,#b{<br> width:100px;<br> height:100px;<br> background-color:red;<br> }<br> #b{<br> background-color:green;<br> margin-top:-20px;<br> margin-left:20px;<br> }<br> #a{<br> position:relative;<br> }<br><br></style><body><br><div id="a"><br> 我是A<br></div><br><div id="b"><br> 我是B<br></div><br></body><br>然后你看到的是这样的情况：
这说明啥呢，虽然b元素在a的后面，但是a加了position之后，他的堆叠层级就变高了，跑到了b的上面<br>，所以我们利用这个规则在无z-index参与的情况下也可以实现三层堆叠，比如这样：
<style type="text/css"><br> /*定位规则,在没有z-index干扰的情况下也可以三个div也可以做出堆叠效果哦*/<br> #a,#b{<br> width:100px;<br> height:100px;<br> background-color:red;<br> }<br> #b{<br> background-color:green;<br> margin-top:-20px;<br> margin-left:20px;<br> }<br> #a_1{<br> width:50px;<br> height:50px;<br> background-color:blue;<br> position:relative;<br> left:80px;<br> top:50px;<br> }<br><br> </style><br></head><br><body><br><div id="a"><br> 我是A<br> <div id="a_1"><br> 我是A的子DIV<br> </div><br></div><br><div id="b"><br> 我是B<br></div><br></body>
3.有z-index参与的情况：<br>1.简单的堆叠：<br>#div1{<br>position:relative;<br>z-index:1;<br>}#div2{<br>position:relative;<br><br>}#div1{<br>position:relative;<br>z-index:0;<br>}<div id="div1"></div><br><div id="div2"><//div><br><div id="div3"></div><br>此时的层级顺序是，div1在最顶层，div2和div3均在第二层也就是最后一层。需要大家注意的一点，在position有值时，设置z-index为0和不设z-index是一样的。<br><br>2.相对复杂的堆叠（z-index的从父原则）：<br> 意思就是子元素首先要看看父元素有无z-index，就像最开始的例子，当两个父元素div1的z-index为1,div2的z-index为0时，div1的所有的子元素及自己的层级就会比div2及其子元素高，这也解释了为什么div2_1的z-index值设为999了都还是在div1的下面。讲到这，上述例子还有一个问题，div1_1我都设了z-index为-100了，为什么还是比div1高呢。有些同学会想，我就是想让背景黑色div1_1在父元素div1的下边怎么办呢，所以这里还有一个原则：当父元素有设置z-index时，那么他的子元素的层级一定会比他高，所以如果你想让一个子元素的层级在父元素之下，你一直设置子元素的z-index，都设置成了z-index 1000了都，没有效果，那么不妨看看父元素是否也被设置了z-index吧！
最後再強調一下：z-index是允許為負的,其次z-index的值應該是一個整數，不帶px，很多新手寫寬高寫慣了，順便就把z-index的值帶了px .其次，在使用z-index的時候，一定要配合position使用，不管這個position 的值時fixed,absolute還是relative，但在值為static和不設position的層級是一致的。
總結一下，上面的例子好像很亂，實際狀況真的不知道怎麼使用才好。個人經驗來看，先看有無position，無position依先後順序來看層級。有position，再看看是否有z-index，在父元素的子元素設定z-index的值時，一定要注意父元素是否設定了z-index，因為父元素會影響子元素的層級，這一點很重要，也是我們最常犯的錯誤。如果當你一個元素的z-index值設定最大或最小都沒有效果時，不妨看看這是否你對z-index的從父原則沒有理解透徹吧!最後再說點和本文無關的，css樣式有很多屬性都具有繼承性，例如color,我們需要對其慢慢的了解，建議有時間大家可以去看看有關於css繼承性方面的知識。
<br><br>
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML：結構，CSS：樣式，JavaScript：行為
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。
HTML，CSS和JavaScript的未來：網絡開發趨勢
Apr 19, 2025 am 12:02 AM
HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。
HTML的未來：網絡設計的發展和趨勢
Apr 17, 2025 am 12:12 AM
HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。
HTML與CSS vs. JavaScript：比較概述
Apr 16, 2025 am 12:04 AM
HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。
HTML：建立網頁的結構
Apr 14, 2025 am 12:14 AM
HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。
HTML：是編程語言還是其他？
Apr 15, 2025 am 12:13 AM
HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。
HTML與CSS和JavaScript：比較Web技術
Apr 23, 2025 am 12:05 AM
HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。
