层叠上下文:z-index

w3c规范先行

9.9 Layered presentation
9.9.1 Specifying the stack level: the 'z-index' property
'z-index'
Value:      auto | <integer> | inherit
Initial:    auto
Applies to:     positioned elements
Inherited:      no
Percentages:    N/A
Media:      visual
Computed value:     as specified
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.
In this section, the expression "in front of" means closer to the user as the user faces the screen.

In CSS 2.1, 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.

The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. Stacking contexts can contain further stacking contexts. A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes.

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.

The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of 'z-index' other than 'auto'. Stacking contexts are not necessarily related to containing blocks. In future levels of CSS, other properties may introduce stacking contexts, for example 'opacity' [CSS3COLOR].

Within each stacking context, the following layers are painted in back-to-front order:

the background and borders of the element forming the stacking context.
the child stacking contexts with negative stack levels (most negative first).
the in-flow, non-inline-level, non-positioned descendants.
the non-positioned floats.
the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
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.

This painting order is applied recursively to each stacking context. This description of stacking context painting order constitutes an overview of the detailed normative definition in Appendix E.

In the following example, the stack levels of the boxes (named with their "id" attributes) are: "text2"=0, "image"=1, "text3"=2, and "text1"=3. The "text2" stack level is inherited from the root box. The others are specified with the 'z-index' property.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
    <TITLE>Z-order positioning</TITLE>
    <STYLE type="text/css">
      .pile { 
        position: absolute; 
        left: 2in; 
        top: 2in; 
        width: 3in; 
        height: 3in; 
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      <IMG id="image" class="pile" 
           src="butterfly.png" alt="A butterfly image"
           style="z-index: 1">

    <DIV id="text1" class="pile" 
         style="z-index: 3">
      This text will overlay the butterfly image.
    </DIV>

    <DIV id="text2">
      This text will be beneath everything.
    </DIV>

    <DIV id="text3" class="pile" 
         style="z-index: 2">
      This text will underlay text1, but overlay the butterfly image
    </DIV>
  </BODY>
</HTML>
This example demonstrates the notion of transparency. The default behavior of the background is to allow boxes behind it to be visible. In the example, each box transparently overlays the boxes below it. This behavior can be overridden by using one of the existing background properties.

提取关键信息：

z-index: 的值有 auto | | inherit，默认是auto，应用于：positioned elements(定位元素)。对于定位的框，z-index属性将指定：

确定在当前堆叠上下文中，该盒子的堆叠层级。
该盒子是否建立一个堆叠上下文。

当值是<integer>，该生成的盒子在当前堆叠上下中的整数的堆叠层级，并且该盒子也会生成一个新的堆叠上下文。

当值是auto,该生成的盒子在当前堆叠上下文中的堆叠层级是0，该盒子不会生成一个新的堆叠上下文，除非是根元素。

在CSS2.1，每个盒子都在三维上有个定位。除了水平位置和垂直位置，盒子沿“z轴”排列，一个一个格式化。当盒子在视觉上重叠时，z轴上的排列就十分重要。

这渲染数绘画到画布的顺序是根据层叠上下文的描述来的。层叠上下文可以内嵌重叠上下文。对于父层叠上下文来说，其每一个子层叠上下文都是一个整体(atomic)，当一个盒子是属于某个层叠上下文的将不可能出现在任何盒子之间。

每个盒子都属于某一个层叠上下文。每个定位盒子在层叠上下文中都有整数的层叠级别，该层级将控制其在同一个层叠上下文在z轴上的位置。有着更高层叠级别的盒子会展示在更低层叠级别的盒子的上面。盒子可以有负数的层叠级别。对于在同一个层叠上下文内的多个盒子，但他们有相同的层叠级别时，其位置将根据它出现在文档树上先后顺序来堆叠。

根元素形成根层叠上下文。其他层叠上下文由任何定位元素（包括相对定位的元素）生成，该元素的z-index的计算值不为auto。堆叠上下文不一定与包含块相关。在CSS的更多级别中，其他属性可能会引入堆叠上下文，例如“opacity”。

在每个层叠上下文，这些图层将按照以下顺序进行绘制：

背景和边界形成的层叠上下文。
具有负层叠级别的子层叠上下文（首先是最负的）
在文档流，非内联级别，非定位的后代。
非定位的浮动元素。
在文档流中，内联级别，非定位子体，包括内联表和内联块。
层叠级别为0的子层叠上下文和层叠级别为0的定位子体。
具有正层叠级别的子层叠上下文（最小正优先级）。

在每个层叠上下文中，具有层叠级别0（在第6层中）、未定位浮点（第4层）、内联块（第5层）和内联表（第5层）的定位元素被绘制，就好像这些元素本身生成了新的层叠上下文一样，除了它们的定位子体和任何可能的子层叠上下文都参与了绘制当前层叠上下文。

Link-Fight / Link-Fight.github.io

层叠上下文:z-index #44

w3c规范先行