1. z-index: auto | <integer>  

z-index 接受的屬性值為：關鍵字auto和整數，整數可以是負值（Firefox2.0及之前不支持負值）。

需要注意的是 z-index 雖然很給力，卻只能應用于定位元素（即設置了 position 屬性為非 static 值），其它情況下，z-index 將被忽略。

對于定位元素而言，z-index 意味著：

確定該元素在當前層疊上下文中的層疊級別。
確定該元素是否創建了一個新的局部層疊上下文。

創建層疊上下文

在規范中說明：當某個元素的 z-index 未顯式定義或者被指定為 auto 時，該元素不會產生新的局部層疊上下文。也就是說它可以和兄弟，祖先，后輩元素處在同一個堆疊上下文中，它們被放在一起比較層疊級別，兒子可以蓋住祖先，父親也可以蓋住兒子，兒子甚至可以越過祖先，蓋住祖先的兄弟，在層疊上下文中，它們是并級的關系。來看這樣一個例子 DEMO1: z-index與創建層疊上下文

值得高興的是，大部分瀏覽器都實現了這個特性；不過在IE6/7下，不論 z-index 值是否被顯式定義，都將產生新的局部層疊上下文，也就是說子元素不可以越過是定位元素的父親，子元素都處在新創建的局部層疊上下文中，只能在內部進行層疊級別的比較。

深入淺出

某區域內有個浮層提示或者下拉菜單，于是可能需要遮住該區域之下的區域。

HTML

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表