CSS

Stacking Context

In IE9, if two parent elements don’t have z-index set, their children who do have z-index could jump out of the flow of z-index.

In the flow of all DOM elements, there is something that decides the order of appearance among each other: the stacking context. And its behaviour is somewhat odd in some cases.

Some wonderful references:

  1. The Stacking Context
  2. Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
  3. Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
  4. Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
Standard