层叠上下文（The stacking context）

层叠上下文（The stacking context）

原文地址https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context?redirectlocale=en-US&redirectslug=Understanding_CSS_z-index%2FThe_stacking_context

In the previous example, Adding z-index, the rendering order of certain DIVs is influenced by their z-index value. This occurs because these DIVs have special properties which cause them to form a stacking context.

在上一个例子中，一些Div的渲染受其z次序的影响。这主要与div的一些特性所引起的层叠上下文有关。

A stacking context is formed, anywhere in the document, by any element which is either

  • the root element (HTML),
  • positioned (absolutely or relatively) with a z-index value other than "auto",

  • 层叠上下文在HTML文档的任意位置都能建立，而能够建立这些上下文的元素有：

    • 根元素
    • Position属性为绝对定位或者相对定位的结点元素，且其z-index值不能为"auto"
    • 拥有opacity（且其值小于1）的元素。

     

     

    Within a stacking context, child elements are stacked according to the same rules previously explained. Importantly, the z-index values of its child stacking contexts only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.

    拥有层叠上下文的结点元素的子节点按z次序的规则叠放。特别一提的是，对某一个拥有z次序的父元素而言，其子元素的一旦也有z次序属性，那么这个z次序局限在其父元素中。父元素存在层叠属性，那么这个属性就将作为原子属性单元存在。

     

    In summary:

  • Positioning and assigning a z-index value to an HTML element creates a stacking context, (as does assigning non-full opacity).
  • Stacking contexts can be contained in other stacking contexts, and together create a hierarchy of stacking contexts.
  • Each stacking context is completly 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.

    总结而言：

  1. 拥有绝对定位、相对定位且z-index被赋值的元素、opacity<1的元素等拥有层叠上下文属性。
  2. 层叠上下文可以嵌套。这种嵌套创建了一种层级结构。
  3. 每一个层叠上下文独立于其兄弟节点，只有其孩子节点受到其影响。
  4. 每个层叠上下文都是独立的：当某个父结点元素的内容结点被层叠放置了以后，整个元素都被认为是在其层叠上下文内层叠堆放。

     

    Note: The hierarchy of stacking contexts is a subset of the hierarchy of HTML elements, because only certain elements create stacking contexts. We can say that elements that do not create their own stacking contexts are assimilated by the parent stacking context.

     

     

注意：层叠上下文的层次关系是HTML文档DOM结构的一个子集，因为只有一些元素在一定条件下才有层叠上下文属性。我们也可以从另一个角度理解，某些元素没有创建层叠上下文属性是因为被其父元素同化了。

 

The example

示例如下图：

 

In this example every positioned element creates its own stacking context, because of their positioning and z-index values. The hierarchy of stacking contexts is organized as follows:

在这个例子中每个定位的元素都创建了自己的层叠上下文，因为他们的定位和z-index值。层叠上下文的层次关系如下组织：

  • Root
  • DIV #1
  • DIV #2
  • DIV #3
  • DIV #4
  • DIV #5
  • DIV #6

    It is important to note that DIV #4, DIV #5 and DIV #6 are children of DIV #3, so stacking of those elements is completely resolved within DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling's DIV.

    显而易见，DIV #4, DIV #5 和 DIV #6 是 DIV #3的子元素。所以这些元素的层叠次序由DIV#3来决定。一旦DIV#3内的内容层叠和渲染完毕，整个DIV#3将在根目录下和其兄弟结点元素同级存放。

     

    Notes:

  • DIV #4 is rendered under DIV #1 because DIV #1's z-index (5) is valid within the stacking context of the root element, while DIV #4's z-index (6) is valid within the stacking context of DIV #3. So, DIV #4 is under DIV #1, because DIV #4 belongs to DIV #3, which has a lower z-index value.

    DIV #4在DIV #1下面是因为在两者z-index均有效的情况下，DIV #4属于DIV #3，而DIV #3的z-index值要比DIV #1的值小。

  • For the same reason DIV #2 (z-index 2) is rendered under DIV#5 (z-index 1) because DIV #5 belongs to DIV #3, which has an higher z-index value.

    同样道理DIV #2在DIV#5下面是因为DIV#5也属于DIV #3，DIV #3的z-index值要比DIV #5的值大。

  • DIV #3's z-index is 4, but this value is independent from z-index of DIV #4, DIV #5 and DIV #6, because it belongs to a different stacking context.

    DIV #3的z-index值是4，它和DIV #4, DIV #5 和 DIV #6的z-index并无大小比较关系，因为他们属于不同的层叠上下文范围。

  • 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):

    一种识别层叠元素的z次序的简单方式是把他们当作一种"版本标识"，子元素的版本是在父元素的主版本基础上加上的小版本信息。这种方式可以很容易看出DIV #5（假设"版本"为4.1）为什么在DIV #2（版本为2）之上。下面罗列一下渲染次序：

  • Root（根目录）
  • DIV #2 - z-index is 2（DIV #2为2）
  • DIV #3 - z-index is 4（DIV #3为3）
  • 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 #5为4.1）
  • DIV #6 - z-index is 3, stacked under an element with a z-index of 4, which results in a rendering order of 4.3（DIV #6为4.3）
  • 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（DIV #4为4.6）
  • DIV #1 - z-index is 5（DIV #1 为5）

     

posted @ 2012-11-15 23:22  jiangC  阅读(502)  评论(0)  编辑  收藏  举报