层叠上下文,又称stacking context,是指元素在垂直于屏幕的z轴上的排列布局。
其中影响层叠上下文的属性包括以下几种:
1. flex元素的子元素,同时z-index不是auto
2. opacity值不为1的元素
3. transform值不为none的元素
4. position值为relative/absolute/fixed的元素
当元素发生层叠时,当具有明显的层叠水平标识时(z-index),层叠水平高的元素覆盖层叠水平低的元素。
当元素的层叠水平一致时,DOM流中后面的元素覆盖前面的元素。