z-index 詳解

z-index 屬性用來控制元素在 z 軸上的順序

1. 適用範圍

z-index 僅適用於定位元素。即 postition 值爲 relative, absolute 和 fixed 屬性

2. 做用

• 指定當前元素的 堆疊順序
• 建立新的 堆疊上下文

2.1 什麼是堆疊順序

• 堆疊順序是當前元素位於 z 軸上的值。值越大表示元素越靠近屏幕，反之元素越遠離屏幕
• 在同一個堆疊上下文中， z-index 值越大，越靠近屏幕。除了 z-index 控制着元素的 堆疊順序，還有其餘因素控制着元素的 堆疊順序，以下：
  <img src="https://www.github.com/hileix/blogs/raw/master/src/assets/堆疊順序.png">

2.1 什麼是堆疊上下文？

層疊上下文

• 堆疊上下文 是一個在該元素內的堆疊順序不會影響到其餘堆疊上下文堆疊順序的一個 環境
• HTML 文檔默認的堆疊上下文： html 元素

3. 其餘

• 元素的堆疊順序不會高於（或低於）父元素的堆疊順序