CSS 7 class levels stack

1. laminated level

When the two elements of the same level, when stacked, this time we should follow the following two criteria:

1. Principles come from behind
2. Who z-index large, who on guidelines

2. laminated context

Layered context, you can understand the scope JS, a page is often not only a layered context (because there are many ways to generate stacking context, but you do not realize it), stacked in a context, we follow rule laminated stacked horizontal elements.

Introduction to the concept of layered context, let's look at the ways in which you can create layered context?

Under normal circumstances, a total of three types of large stacked to create a context:

1. Create a default stack context
2. We need to meet the z-index triggers the creation of layered context
3. With the z-index does not need to trigger the creation of a context laminate

First, create a default stack context

Stacking context created by default, only the root element HTML, where you can be understood as the body tag. It belongs to the root context element laminated, without any CSS property triggered.

Second, the need to create a trigger with z-index multilayer context

Z-index value dependent laminate case create context:

1. position is relative / absolute / fixed (some browsers)
2. flex item (parent element display to flex | inline-flex), note the sub-elements create stacking contexts , not the parent element to create layered context

In both cases, it is necessary to set a specific z-index values , not z-index is set auto (arranged to z-index: 0), which is the z-index: Auto and z-index: 0 minute point difference.

We mentioned earlier, setting position: relative when the z-index value auto will take effect, but this time did not create layered context, when the z-index is not set to auto, even setting z-index: 0 will trigger elements create a layered context.

Third, the z-index with the trigger does not need to create a context laminate

In this case, basically in the new CSS3 properties to trigger common are:

• Transparency, opacity element is less than 1
• mix-blend-mode value of the element is not normal
• The following elements of the property value is not none:
  • transform
  • filter
  • perspective
  • clip-path
  • mask / mask-image / mask-border
• attribute value of the element isolution isolate
• -webkit-overflow-scrolling attribute element to touch
• Will-change element includes a property value laminate creates context

After introduction to the concept of how to create a context and to create a laminated manner, it is noted that, to create a context to be understood that the elements are stacked laminate local context, it affects only the elements which future generations, its own horizontal laminate laminated by its parent context decided.

3. sum up the display order of how to compare the two DOM elements of it?

1. If the same context laminate according laminated level rules to display elements
2. If it is stacked in different contexts, to find a common ancestor stacking context, and the context of this relatively common stacked in horizontal layered laminated context where the two elements.