[HTML/CSS]z-Index層重疊順序

<a href="http://www.cnblogs.com/wolf-sun/p/3839657.html#t1">文法結構</a>

<a href="http://www.cnblogs.com/wolf-sun/p/3839657.html#t2">如何使用？</a>

<a href="http://www.cnblogs.com/wolf-sun/p/3839657.html#t3">使用案例</a>

<a href="http://www.cnblogs.com/wolf-sun/p/3839657.html#t4">總結</a>

 z-index：具體數字。如：div｛z-index：100｝，注意，後面跟的數字并不帶機關。主要應用在div，span等标簽的層疊處理。

z-index在使用絕對定位 position:absolute屬性條件下使用才能使用。通常我們讓不同的對象盒子以不同順序重疊排列，就需要z-index樣式進行設定了。

為了便于了解，我們這裡用三個不同顔色的div進行對比學習。

css代碼：

html代碼：

結果：

三個div都使用了絕對定位position:absolute樣式，并設定了相同的寬高，為了便于觀察，使用了left，top樣式将他們的位置錯開。

可見：

紅色的div的位于最下面：z-index：10；

藍色的div位于中間：z-index：20；

黃色的div位于最上面：z-index:30；

在使用z-index進行層疊時，需和position:absolute樣式一起使用，z-index後跟的數字可以為負數。z-index後的值越大，越靠近螢幕。

部落格位址：

<a href="http://www.cnblogs.com/wolf-sun">http://www.cnblogs.com/wolf-sun/</a>

部落格版權：

本文以學習、研究和分享為主，歡迎轉載，但必須在文章頁面明顯位置給出原文連接配接。

如果文中有不妥或者錯誤的地方還望高手的你指出，以免誤人子弟。如果覺得本文對你有所幫助不如【推薦】一下！如果你有更好的建議，不如留言一起讨論，共同進步！

再次感謝您耐心的讀完本篇文章。

轉載：http://www.cnblogs.com/wolf-sun/p/3839657.html