层叠上下文与Z-index

层叠上下文(stacking context)

英文翻译：stacking 栈，一叠，一摞；context 上下文，环境；

基本概念

为了让html元素在三维空间上正确排序，假定有z轴且它垂直于屏幕并向屏幕外；那些形成层叠上下文的元素将决定其子元素(甚至包括背景，边框)在z轴上的排序即如何彼此遮挡。

如何形成层叠上下文

层叠上下文由满足以下任意一个条件的元素形成：

0.根元素 (HTML), 1.z-index 值不为 "auto"的绝对/相对定位，
2.一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display:
3.flex|inline-flex，
4.opacity 属性值小于 1 的元素（参考 the specification for opacity），v 5.transform 属性值不为 "none"的元素，
6.mix-blend-mode 属性值不为 "normal"的元素，v 7.filter值不为“none”的元素，
8.perspective值不为“none”的元素，
9.isolation 属性被设置为 "isolate"的元素，
10.position: fixedv 11.在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
13.-webkit-overflow-scrolling 属性被设置 "touch"的元素

层叠等级

Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within 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 back-to-front according to document tree order.
层叠等级就是一个定位元素的z-index值，并且一个元素只属于一个层叠上下文中，也就是说层叠等级只在当前上下文中有意义。层叠等级可负，它们的遮挡规则是大者在上，后来居上。

层叠顺序

Within each stacking context, the following layers are painted in back-to-front order: 1.the background and borders of the element forming the stacking context. 2.the child stacking contexts with negative stack levels (most negative first). 3.the in-flow, non-inline-level, non-positioned descendants. the non-positioned floats. 4.the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks. 5.the child stacking contexts with stack level 0 and the positioned descendants with stack level 0. 6.the child stacking contexts with positive stack levels (least positive first). Within each stacking context, positioned elements with stack level 0 (in layer 6), non-positioned floats (layer 4), inline blocks (layer 5), and inline tables (layer 5), are painted as if those elements themselves generated new stacking contexts, except that their positioned descendants and any would-be child stacking contexts take part in the current stacking context.

1.父元素的背景，边框。

2.负层叠等级的子元素 —— 层叠上下文内有着负z-index值的子元素。

3.块级盒，浮动盒 —— 文档流中非行内,非定位子元素，非定位浮动元素。

4.行内盒 —— 文档流中行内级别,非定位子元素。

5.层叠等级为0的定位元素 —— z-index=0。

6.正层叠等级的定位元素 —— z-index>0。

注意6，7中元素为定位元素

切勿与层叠等级混淆，层叠顺序才是真正决定其排序的规则；并且注意层叠等级可以为负。

于每一个层叠上下文他们都遵守如上规则。

Z-index

Value: auto | <integer> | inherit For a positioned box, the 'z-index' property specifies: The stack level of the box in the current stacking context. Whether the box establishes a stacking context. Values have the following meanings: integer: This integer is the stack level of the generated box in the current stacking context. The box also establishes a new stacking context. auto: The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.

对于一个定位元而言它的除0外的z-index不仅决定它的层叠等级还会建立层叠上下文。当z-index为auto时，元素的层叠等级为0，不生成层叠上下文，除非它是跟元素。

最佳实践：

1.使用z-index需使元素定位。

2.注意若父元素的层叠等级小于同层元素，那么子元素z-index无论多大都可能不会遮挡其他元素。再次强调，层叠等级只在当前层叠上下文中有意义。

3.不要无谓使用z-index，也不应设置太大。

当z-index无效时可以考虑一下情况。

z-index属性的元素没有进行定位导致层叠无效。

父元素的层叠优先级比其他元素低

IE6-IE7下父元素没有设置z-index即父元素非层叠元素

IE6下z-index属性受到float浮动属性的影响

IE6-IE7下使用inherit属性值进行定位

参考:

1. 2. 3.