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)