理解z-index

Posted 2020-10-10 Mr.Nut

1. non-positioned element：无CSS定位的元素，也就是position: static的元素。
2. positioned element：CSS定位的元素，也就是position: relative/absolute/fixed的元素。
3. box：文档树由element组成，渲染树由box组成，实际进行元素大小、布局渲染操作的对象是box进行而不是element。box由element对应生成（也有是anonymous box不是由element对应生成，而是渲染器根据规则自动生成），non-positioned element对应的是non-position box，positioned element对应的是position box。
4. z-axis：box定位坐标系中的z轴。
5. stacking context：层叠上下文，z-axis的基本组成单位。box与stacking context的映射关系为N:1。每个stacking context有一个父context（除了root stacking context外）和0~N个子context。
6. root stacking context：与根box（html/body对应的box）对应的层叠上下文，是其他stacking context的祖先context，root stacking context的范围覆盖整条z-axis。
7. stack level：层叠等级，当N个box位于同一个stacking context中，则通过stack level来决定它们位于z-axis上的位置。注意：stack level为相对值而非如px那样为绝对值。

层叠规则

1. 1. 前提：boxes属于同一个stacking context，并且z-index相同 。  规则：按照box对应的element在文档树的顺序，后者比前者更靠近用户（back-to-front）
2. 2. 前提：boxes属于同一个stacking context，并且z-index不同。   规则：z-index属性值大的box更靠近用户
3. 3. 前提：boxes属于不同的stacking context，并且stacking contexts没有祖孙/父子关系 。  规则：boxes会向上沿着父box进行搜索，直到父boxes属于同一个stacking context为止，然后比较父boxes的z-index属性值，z-index属性值大的box更靠近用户。
4. 4. 前提：boxes属于不同的stacking context，并且stacking contexts为祖孙/父子关系。       规则：属于子stacking context的box必定更靠近用户
5. 5. 前提：boxes属于相同的stacking context，并且两者都是non-positioned element。        规则：float:left|right的元素必定更靠近用户

同一个stacking context的z-index才具有可比性，也就是说在讨论z-index时必须带说明是哪个stacking context下的z-index。
z-index属性值仅对positioned box生效，而non-positioned box的z-index永远为0。

z-index的两个作用：

1. 设置box在其所属的stacking context下的stack level；
2. 当z-index属性值非0时，则在该box中创建一个新的stacking context，而该box的子孙box默认属于这个新stacking context

注意：z-index的默认值为auto，自动赋值为0。因此默认情况下不会创建新的stacking context。