mozilla

Compare Revisions

The stacking context

Change Revisions

Revision 46803:

Revision 46803 by Mgjbot on

Revision 46804:

Revision 46804 by Sandwich on

Title:
The stacking context
The stacking context
Slug:
CSS/Understanding_z-index/The_stacking_context
CSS/Understanding_z-index/The_stacking_context
Tags:
css, Understanding_CSS_z-index
css, Understanding_CSS_z-index
Content:

Revision 46803
Revision 46804
tt78      </li>
79      <li>An easy way to figure out the <i>rendering order</i> of
 > stacked elements along the Z axis is to think of it as a "versio
 >n number" of sorts, where child elements are minor version number
 >s underneath their parent's major version numbers. This way we ca
 >n easily see how an element with a z-index of 1 (DIV #5) is stack
 >ed above an element with a z-index of 2 (DIV #2), and how an elem
 >ent 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):
80        <ul>
81          <li>Root
82            <ul>
83              <li>DIV #2 - z-index is 2
84              </li>
85              <li>DIV #3 - z-index is 4
86                <ul>
87                  <li>DIV #5 - z-index is 1, stacked under an ele
 >ment with a z-index of 4, which results in a rendering order of 4
 >.1
88                  </li>
89                  <li>DIV #6 - z-index is 3, stacked under an ele
 >ment with a z-index of 4, which results in a rendering order of 4
 >.3
90                  </li>
91                  <li>DIV #4 - z-index is 6, stacked under an ele
 >ment with a z-index of 4, which results in a rendering order of 4
 >.6
92                  </li>
93                </ul>
94              </li>
95              <li>DIV #1 - z-index is 5
96              </li>
97            </ul>
98          </li>
99        </ul>

Back to History