Deep Z-index

Today saw the Zhang Xin Asahi great god about Z-index video. Below, write down your own temporary summary. There may be no place to go back to modify

Start by saying some basic concepts and rules:

cascading contexts: 1. Page root element 2. Position the element and the Z-index value is numeric (visible Z-index is limited by the cascading context) 3. When setting other properties (especially many properties in CSS3). In this case, the element will have a cascading context, with cascading context stacked horizontally higher than ordinary elements, so if the normal element does not have a cascading context, it will "sink" until the page root element is encountered as a cascading context

Cascade level: In the context of a cascade in the order of display (z-axis) direction, the cascade level is all elements have, and z-index only positioned elements have

Stacking order: Is the rule, a complete cascading context element needs to follow such a rule: see Seven hierarchy Level chart

Cascading comparisons: The first general rule is: 1. Document flow in order, who after who on 2.z-index size, who big on;

There are a few things to note: if nested, the child element is determined by the comparison between its parent elements.

There are, of course, a lot of examples to illustrate, not to be continued ...

Deep Z-index