Z-index specification reference
• In W3C CSS2.1, each element has a three-dimensional spatial location, except for the horizontal and vertical positions we are familiar, the elements can be stacked on the "Z axis" and arranged forward in sequence;
• The order in which elements are displayed in the Z axis is determined by the cascade context and Cascade level. In the document, each element belongs to only one cascading context. In a given cascade context, each element has an integer Cascade level, which describes the display order of elements in the "Z axis" in the same cascade context;
• In the same stack context, a large stack level is displayed on the top, while a small stack level is displayed on the bottom. When the stack level is the same, the back-to-font principle is followed );
• In different stack contexts, the display order of elements is determined by the Cascade level of the parent stack context. It has nothing to do with its own cascade level;
• Each positioning element belongs to a stacking context. The root element forms the root stacking context, while other stacking context is generated by the positioning element (the z-index of the positioning element is defined as a non-auto z-index value ), the positioning sub-element takes the local stacking context as a reference and uses the same rules to determine the cascade order;
• When either element is stacked and another element is contained in different stacking context elements, the order of display is determined by the stack level of stacking context. That is to say, in the same stacking context, the order is determined by the z-index of the element itself. Otherwise, it is determined by the z-index of the parent element of the stacking context.
Example
| The code is as follows: | Copy code |
<Html> <Body> </Html> |
|
Note: an element can have a negative z-index attribute value.
Note: Z-index can only work on positioning elements (for example, position: absolute ;)!
Problems in IE
When the 'Z-index' of the positioning element is not set (auto by default), a new local Cascade context is created under IE6 IE7 IE8 (Q. In other browsers, new local cascading contexts are not generated in strict accordance with the standards.
This problem will lead to a major difference in the stacked relationship of positioning elements in different browsers, which can lead to page layout disorder and content coverage.
The affected browsers include IE6 IE7 IE8 (Quriks Mode)
Copy the code directly from w3help and analyze the following code:
| The code is as follows: | Copy code |
<Style type = "text/css"> <Div style = "position: relative;" class = "p1"> 1 |
|
Solve IE7's absolute position on z-index
For more details, see: http://www.111cn.net/cssdiv/163/42221.htm
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
