z-index
為什么要在這里提到 `z-index` 屬性呢?那是因為 `z-index` 屬性只對定位元素有效,即 `position` 值為 `absolute,relative,fixed` 時才有效。我們首先了解下什么叫 z-index。

從上圖我們不難發現 `z-index` 值代表的是元素的堆疊順序,值越高則顯示順序越優先。
~~~
<div style="position: absolute;z-index:1">Im an absolute element</div>
<div style="position: fixed;z-index:2">Im a fixed element</div>
~~~
//`fixed` 元素 `z-index` 比 `absoulute` 元素高,所以顯示在前面
(我把背景色調為非透明,這樣可以看得更清楚),假如 z-index 值相同會出現什么情況呢?
~~~
<div style="position: absolute;z-index:1">Im an absolute element</div>
<div style="position: fixed;z-index:1">Im a fixed element</div>
~~~
//`z-index `值相同,仍然顯示為 `fixed` 元素
所以我們知道,當 `z-index` 值相同時,后加載的元素顯示優先。
特別值得一提的是,其子元素的 z-index 值只在父級層疊上下文中有意義。子級層疊上下文被自動視為父級層疊上下文的一個獨立單元。
>詳細參考:[層疊上下文](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
- 序
- 開發自己的博客
- 面試集合
- 基礎
- 1、JavaScript
- js技巧
- 2、CSS
- position之absolute
- em與rem
- inline-block
- background
- 圓角、透明度、漸變
- 關于css中的0和none
- css display:none小結
- z-index小結
- 理解滾動條
- 有關@font-face的問題
- 3、HTML
- URI中依賴協議的URL
- 4、MySQL
- limit使用
- 5、jQuery
- 6、移動Web開發
- 設計稿與分辨率
- 字體
- 圖片的自適應
- 7、前端布局bug問題(!<=IE8)
- SEO與頁面結構
- seo
- vsphere 虛擬服務器
- 代碼里的彩蛋(神注釋)
- 玩轉HTML5移動頁面
- 知識梳理
- JS 鍵盤碼
- 其他資源記錄
- temp
- TODO
- 簡單有趣的庫??
- xx