通常認為html頁面是二維的，但實際上，css還有乙個z-index屬性，允許層疊元素。
所有的盒模型元素都處於三維座標系中。 除了我們常用的橫座標和縱座標， 盒模型元素還可以沿著「z軸」層疊擺放， 當他們相互覆蓋時， z軸順序就變得十分重要。假定元素沒有指定
z-index屬性，那麼元素按照如下順序疊放（從底到頂）
根元素的背景和邊界
普通流(無定位)裡的塊元素(沒有position或者position:static;)按html中的出現順序堆疊
定位元素按html中的出現順序堆疊
對於浮動的塊元素來說，堆疊順序變得有些不同。浮動塊元素被放置於非定位塊元素與定位塊元素之間：
根元素的背景與邊框
位於普通流中的後代塊元素按照它們在 html 中出現的順序堆疊
浮動塊元素
常規流中的後代行內元素
後代中的定位元素按照它們在 html 中出現的順序堆疊
如果需要改變預設的擺放順序，只需給元素指定z-index。z-index必須是整數，體現了元素在z軸的位置：
沒有指定z-index的時候，所有元素預設在0層渲染。多個元素的z-index屬性相同時，將按照上文描述的順序布局。
使用z-index排序的例子：
注意，div#5的z-index無效，因為未指定position屬性。
指定z-index屬性將構造乙個堆疊上下文。
以下元素構成堆疊上下文指：
堆疊上下文中的子元素按照前述順序擺放。堆疊上下文內部的子堆疊上下文的z-index只在父堆疊上下文中有意義。
總而言之：
css中的z index屬性
參考 先說下總結 1 z index 必須結合relative或absolute才有效 2 兄弟元素之間 z index 0 z index auto z index不寫效果是一樣的,他們之間按照書寫的順序去覆蓋 3 如果想讓父元素覆蓋掉子元素，就要使子元素的z index為負值同時父元素還不能設定...
關於css中的z index 屬性
檢索或設定物件的層疊順序。較大 number 值的物件會覆蓋在較小 number 值的物件之上。如兩個絕對定位物件的此屬性具有同樣的 number 值，那麼將依據它們在html文件中宣告的順序層疊。對於未指定此屬性的絕對定位物件，此屬性的 number 值為正數的物件會在其之上，而 number 值...
css深入理解z index
z index auto z index z index inherit 繼承 1.支援負值 2.支援css3 animation動畫 3.在css2.1時代，需要和定位元素 position relative absolute fixed sticky 配合使用 keyframes zindex ...