Stacking Context Rules

New stacking context can be formed on an element:
1 When an element is the root element of a document ( the <html> element )
2 When an element has a position value other than static and a z-index value other than auto
3 When an element has an opacity value less than 1

Stacking order within the same stacking context ( back to front)
1 The stacking context’s root element
2 Positioned elements ( and their children ) with negative z-index values
3 Non-positioned elements
4 floating elements
5 Positioned elements with a z-index value of auto
6 Positioned elements with positive z-index