Understanding CSS z-index

Understanding CSS z-index - MDC - 很詳細的有關 z-index 的文章, z-index絕對不是高的就在上面這麼簡單.

Understanding CSS z-index:Stacking without z-index - MDC

在沒有 z-index 的情況下
1) 分成兩個 group: positioned element (div #1, div #2, div #3, div #4), non-positioned element: (div #5)
2) non-positioned element 先 render, 並且出現在 positioned element的下面
3) render positioned element，先出現在 HTML hierarchy 的在最下面，後出現的往上疊。
Understanding CSS z-index:Stacking and float - MDC

1. Background and borders of the root element
2. Descendant blocks in the normal flow, in order of appearance (in HTML)
3. Floating blocks
4. Descendant positioned elements, in order of appearance (in HTML)
Understanding CSS z-index:The stacking context - MDC

* Positioning and assigning a z-index value to an HTML element creates a stacking context.
* Stacking contexts can be contained in other stacking contexts, and together create a hierarchy of stacking contexts.
* Each stacking context is completly [sic] independent from its siblings: only descendant elements are considered when stacking is processed.
* Each stacking context is self-contained: after the element’s contents are stacked, the whole element is considered in the stacking order of the parent stacking context.

這個說法最簡單清楚
An easy way to figure out the rendering order of stacked elements along the Z axis is to think of it as a "version number" of sorts, where child elements are minor version numbers underneath their parent's major version numbers. This way we can easily see how an element with a z-index of 1 (DIV #5) is stacked above an element with a z-index of 2 (DIV #2), and how an element with a z-index of 6 (DIV #4) is stacked below an element with a z-index of 5 (DIV #1). In our example (sorted according to the final rendering order):

* Root
    o DIV #2 - z-index is 2
    o DIV #3 - z-index is 4
        + DIV #5 - z-index is 1, stacked under an element with a z-index of 4, which results in a rendering order of 4.1
        + DIV #6 - z-index is 3, stacked under an element with a z-index of 4, which
        + DIV #4 - z-index is 6, stacked under an element with a z-index of 4, which results in a rendering order of 4.6 
    o DIV #1 - z-index is 5