需要完成的效果：（處於hover狀態）
實際完成效果碰到的問題：（處於hover狀態，忽略字型圖示的不一樣，找不到一樣的）
可以看到這裡再給下面的盒子新增box-shadow後，陰影部分在hover狀態的情況下，還是能顯示出來。
這時候想到了z-index來解決問題：
z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
注釋：元素可擁有負的 z-index 屬性值。
注釋：z-index 僅能在定位元素上奏效（例如 position:absolute;）！！！
該屬性設定乙個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離使用者更近，為負數則表示離使用者更遠。
z index相關問題
1 啟用z index z軸在元素設定position為absolute或relative後被啟用 2 flash的z index問題 瀏覽器解析頁面時，會判斷元素型別，即是否為視窗型別，如果是視窗型別則優先顯示於非視窗型別的元素，顯示在頁面最頂端。flash有個屬性wmode window 視窗 ...
z index屬性簡介
z index屬性簡介 引用 z index auto number auto 預設值。number 無單位的整數值，可為負數。z index 值較大的元素將疊加在z index值較小的元素之上。對於未指定此屬性的定位物件，z index 值為正數的物件會在其之上，而z index 值為負數的物件在...
z index無效解決
1 父標籤 position屬性為relative 2 問題標籤無position屬性 不包括static 3 問題標籤含有浮動 float 屬性。這樣也很好理解為什麼parent設定了position和z index之後insert的z index就會失效的問題了，他的解決辦法有是三個 1 pos...