This is a very simple example, but it is the key for understanding the concept of stacking context. There are the same four DIVs of the previous example, but now z-index properties are assigned on both levels of the hierarchy.

You can see that DIV #2 (z-index: 2) is above DIV #3 (z-index: 1), because they both belong to the same stacking context (the root one), so z-index values rule how elements are stacked.

What can be considered strange is that DIV #2 (z-index: 2) is above DIV #4 (z-index: 10), despite their z-index values. The reason is that they do not belong to the same stacking context. DIV #4 belongs to the stacking context created by DIV #3, and as explained previously DIV #3 (and all its content) is under DIV #2.

To better understand the situation, this is the stacking context hierarchy:

• Root stacking context
  • DIV #2 (z-index: 2)
  • DIV #3 (z-index: 1)
    • DIV #4 (z-index: 10)

• Stacking without the z-index property: The stacking rules that apply when z-index is not used.
• Stacking with floated blocks: How floating elements are handled with stacking.
• Using z-index: How to use z-index to change default stacking.
• The stacking context: Notes on the stacking context.
• Stacking context example 1: 2-level HTML hierarchy, z-index on the last level
• Stacking context example 3: 3-level HTML hierarchy, z-index on the second level