For a summary of stacking context and CSS z-index, stackingz-index

For a summary of stacking context and CSS z-index, stackingz-index

The most famous CSS attribute in HTML that determines the order of element superposition is z-index. However, we often find some situations in projects that are inconsistent with our expectations. After research and study, we finally figured out the relationship. Summary:

There are many details, and I am not sure that my understanding is correct. Thank you for your correction.

In addition, the following are a series of related articles in MDN. Expand it layer by layer and write it clearly. You can learn about it as a WEB engineer.

• Stacking without z-index: Default stacking rules
• Stacking and float: How floating elements are handled
• Adding z-index: Using 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 2: 2-level HTML hierarchy, z-index on all levels
• Stacking context example 3: 3-level HTML hierarchy, z-index on the second level