倘若不斷向深處扎根，就能茁壯成長 - RM

前言

前面的章節中，我們提過 BFC、IFC 等格式化上下文概念，規範 box 的二維佈局規則，而自 CSS2.1 開始所有的 box 都被視為在一個三維環境中，在這個三維空間中有所謂 z 軸的概念，box 會被置在三維空間中佈局，box 依照 z 軸方向存在著 Stack Level 概念，類似於圖層的概念，我們可以想像所有的 box 有層層堆疊沿著 z 軸的垂直佈局規則，三維空間佈局規則的便是所謂 stacking context。

規範中 z-index 設定 Stack Level 的示意圖。

規範直通車：
CSS Positioned Layout Module Level 3
規範定義：
In CSS, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a “z-axis” and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually. This section discusses how boxes may be positioned along the z-axis.

stacking context

規範定義：
Each box belongs to one stacking context. Each box in a given stacking context has an integer stack level, which is its position on the z-axis relative to other boxes in the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked bottom-to-top according to document tree order.

每個元素生成的 box 都會屬於一個 stacking context，而且每個 box 都有一個 stack level，表示在同一個stacking context 中它在三維空間（z 軸上）相對於其他元素的位置，一般 box 除了指定了 z-index 且非 position: static 外，皆與其父級堆疊上下文 stack level 相同。

• 根元素創建根 stacking context。
• 透過對 position: static 以外的元素制定 z-index 數值可創建 stacking context，並規定其 Stack Level。
• 建立 stacking context 的元素會生成兩個 stack level，一個用於對內它所創建的 stacking context，一個用於它所參與的 stacking context。

例子：

當我們今天有兩個沒設置定位以及 z-index 、沒有浮動的 <div> ，它們在父級堆疊上下文中屬於相同 stack level，只是在 document 出現順序較為後方的 <div> 較晚進行繪製。例子：範例

<div class="box">第一個</div>
<div class="box box-two">第二個</div>

.box{
  width: 100px;
  height: 100px;
  background-color: tomato;
  outline: 3px dotted red;
  margin-bottom: -50px;
}
.box-two{
  margin-left: 25px;
  opacity: .5;
  background-color: lightblue;
}

可以看見上圖 番茄色的 box 在 藍色 box 後方，這兩個 box 的 Stack Level 相同，不過由於 藍色 box 在 document 中出現順序較 番茄色 後面，故顯示會在前方。

繪製順序

由（藍）下至（粉紫）上，越上方越接近用戶

image from W3Help，by Attribution 3.0 Unported (CC BY 3.0)

• （最下）形成堆疊上下文的根元素的背景色 -> 背景圖像 -> border。
• 淺藍 形成堆疊上下文的 block 元素的背景色 -> 背景圖像 -> border。
• 藍 定位元素設置負數值的 z-index
• 粉紅 未定位、in-flow、block-level 元素背景色 -> 背景圖像 -> border。（例如：<table>、<nav>
• 綠 未定位、浮動元素
• 黃 inline 元素
• 橘 定位元素設置 z-index: 0
• 紫色（最上）定位元素設置正數值的 z-index

• 對於已定位元素設定才有效（即position属性值不是static的元素），z-index 属性指定：

1. 元素在當前堆疊上下文的層級。

2. 元素是否創建一個堆疊上下文。

   • auto 元素當前上下文中新生成的元素和父元素堆叠層級相同，除了根元素創建新堆疊上下文。
   • <integer> 指定生成新堆疊上下文的堆疊層 Stack level。

實例：

z-index

<div class="float">4.float</div>
<div class="nagetive-stack">2.nagetive-stack</div>
<div class="non-inline-level">3.block-level</div>
<div class="inline-level">5.inline-level</div>
<div class="zero-stack">6.zero-stack</div>
<div class="positive-stack">7.positive-stack</div>

上圖中，灰色 部分是根元素，呈現在整體的最下方，接著依序 粉紅色 具有負數值 z-index 的絕對定位盒子，紫色 未定位的塊元素，紅色 未定位浮動元素、藍色 inline 元素、綠色 具有 z-index 0 數值的絕對定位盒子、橘色 具有 z-index 正數值的絕對定位盒子。

參考資料：
CSS Positioned Layout Module Level 3
KB013: 分层的显示( Layered presentation ) - W3Help
CSS核心可视化格式模型: 分层的呈现 (Layered presentation) part-9 | 盖聂的个人博客
层叠上下文 - Web 开发者指南 | MDN

以上的部分有任何錯誤的地方，歡迎指正呦～非常感謝～～XD