在我們常用的css中z-index 屬性是設定節點的堆疊順序, 這是我們對 z-index 屬性普遍的認識. 與此同時, 我們總是對堆疊順序的概念模糊不清，這樣將會導致我們在平時的布局中出現一些問題。下面我個人對css中z-index的一些個人的認識，希望能幫到大家，有說錯的地方希望大家指正。
css布局中我們常常會使用一些float:laft;和float:right;以及定位中的absolute,relative,fixed;
有的人誤認為定位和定位之間是本身就存在附帶堆疊順序的,在自己經過測試之後發現,他們的預設是沒有堆疊順序的,只是在html中標籤的前後順序導致的而使大家誤認為是定位和定位之間的堆疊順序而導致的。
下面是正常使用z-index程式碼範例：
定位中的static是標準流，所以這裡不做講解
當我們有三個盒子
div { width: 100px; height: 100px; color: white; float: left; }.div1 { position: fixed; background-color: red; }.div2 { background-color: blue; position: relative; }.div3 { background-color: green; position: absolute; } </style></head><body><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div></body></html>
我們給他們分別設定fixed，relative，absolute；背景色為紅色，藍色，綠色
我們會發現absolute的綠色盒子會在最上面，在html代碼中更改標籤的位置順序則可以讓盒子出現在堆疊層的最上面，當然如果我們要想在不改變html標籤的順序，那麼我們就可以使用第二種方法z-index：
在我們添加z-index是要注意這個樣式是有值的；值也可以影響我們的堆疊順序。
樣式內z-index的值越大的堆疊層越高，當然我們也要注意z-index也並不是在什麼時候都管用的。
只有在同一樣式時，比如定位與定位之間的堆疊，浮動與浮動之間的堆疊，如果有兩個盒子，一個盒子為浮動元素一個盒子為定位元素，兩個盒子發生堆疊，此時我們想要浮動的盒子顯示在定位盒子之上，我們是沒有辦法的，設定z-index這個時候是沒有用的。
定位的盒子本身堆疊的順序就要比浮動的盒子的堆疊順序要高，所以此時我們要解決這個問題就需要把浮動盒子換成定位的盒子，設定之後我們就可以z-index來設定堆疊順序了。
上面是本人的一點個人觀點，希望可以幫到大家，後續自己也會寫一些關於web中一些個人認識。有不同觀點大家可以隨意發表。
【相關推薦】
1. 免費css線上視頻教程
2. css線上手冊
3. php.cn獨孤九賤（2）－css視頻教程
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
