30. CSS 的 z-index & Stacking Context 的形成

Stacking Context

定义

Stacking Context是指对於HTML元素而言，有一个面向使用者的假想轴(z轴)，
而元素会依据设定好的属性，沿着轴进行排列顺序，使元素产生堆叠。

The stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.

在 27. 解释 CSS 的 BFC(Block Formatting Context) 有提到，页面里的元素，预设会形成Block Formatting Context，并依照BFC的性质进行排版。

比较两者的话，可以想成对使用者而言：

Formatting Context 是对二维方向的排列（x轴/y轴） → 预设为由上而下、由左而右排列。
Stacking Context 则是三维方向的堆叠（z轴） → 决定面向使用者（视窗）的堆叠顺序。

性质

特定元素会受到z-index值而影响堆叠顺序，原因是这些元素形成了Stacking Context。

... the rendering order of certain elements is influenced by their z-index value. This occurs because these elements have special properties which cause them to form a stacking context.

会形成Stacking Context的情况包括:

Root element of the document <html>
position 为 absolute/ relative 且 设定z-index
position 为 fixed/ sticky
flex/ grid container 的 child element 且 设定z-index
opacity值 < 1
有设定 transform

z-index

预设值为 0
可以为负值，数字越小离使用者越远，反之越近。
z-index 在 position 不为预设值(static)时有效。

可以把 z-index 的值想成是渲染顺序:
先渲染1，然後渲染2，所以较晚渲染(数字较大)的元素会越靠上/靠近使用者。

这里借用MDN的范例:

层级关系:

div1 z-index:5;
div2 z-index:2;
div3 z-index:4;
- div4 z-index:6;
- div5 z-index:1;
- div6 z-index:3;

Stacking Context在不同层级的间各自独立
→ 意思是，不同层级的元素，z-index值并不互相影响。
以上面设定的顺序而言，并不会从数字最小的div5开始渲染，而是从div1,2,3取最小值开始进行渲染。
没有产生Stacking Context的元素，会被父元素的Stacking Context同化(assimilated)。
→ 要注意**z-index的属性不会继承**，以范例而言，div4如果没有设定z-index，就是0，并不会是从div3继承4。