If just to develop a simple pop-up effect, it is enough to know that the cascade relationship between elements can be adjusted by Z-index. But to deal with the cascade relationship between multiple pop-up windows, it is necessary to fully understand the principle behind z-index and the compatibility problem. This article as the recommendation-layered presentation study after finishing notes, for future inspection.
Since translating English nouns into Chinese nouns is prone to ambiguity (such as normal flow being translated into a document stream), this article will use the original English nouns directly, and the English nouns involved are explained as follows:
non-positionedelement: Elements with no CSS positioning, that is, position:static elements.
positionedelement: CSS positioned elements, that is, position:relative/absolute/fixed elements.
box: The document tree consists of element, the render tree consists of box, the actual element size, layout rendering operation of the object is box instead of element. box is generated by the element (also anonymous box is not generated by the element, but the renderer is automatically generated according to the rules), the non-positioned element corresponds to the Non-position box, The positioned element corresponds to the position box.
z-axis: Box locates the z axis in the coordinate system.
StackingContext: cascading contexts, Z-axis's basic constituent units. The mapping between box and stacking context is n:1. Each stacking context has a parent context (except for root stacking context) and 0~n sub-context.
Root Stackingcontext: The cascading contexts corresponding to the root box (html/body box), which is the ancestor of the other stacking context context,root stacking The scope of the context covers the entire z-axis.
stacklevel: Cascade levels, when n boxes are in the same stacking context, determine their position on the z-axis with the stack degree. Note: The stack level is a relative value rather than an absolute number like px.
Second, the graphical hierarchical display
In fact, we often contact the Z-index is only a hierarchical display of a property, and understanding the principle behind the z-index is essentially to understand the hierarchical display principle. Let's take a look at the objects and attributes (Z-axis, root) stacking context, box, stack level) involved in the hierarchical display and the relationships between them.
HTML Markup
<style type= "Text/css" > p{position:relative;} </style><body> <p id= "D1" style= "Z-INDEX:10;" > <p id= "D4" style= "z-index:-9999;" ></p> </p> <p id= "D2" style= "Z-INDEX:8;" ></p> <p id= "D3" style= "Z-index:9;" ></p> <p id= "P1" ><p></body>Description
1. When constructing the render tree, the corresponding box is generated for element, so p#d1->d1:box,p#d2->d2:box,p#d3->d3:box,p#d4->d4:box,p#p1->p1:box.
2. For positioned box, if the Z-index property value is not 0, a new stacking context will be created and its descendants box will belong to the new stacking context.
3. The z-index of the same stacking context is comparable, that is to say, in the discussion of Z-index, it is necessary to show which stacking context z-index. As the example, although-9,999:10 small, but because D4:box and D1:box are located in different stacking context, it is impossible to determine which box is closer to the user.
Third, cascading rules
The cascade rule is to decide which box is closer to the user.
1. Premise: Boxes belongs to the same stacking context, and z-index the same
Rules: The order of the element in the document tree according to box, which is closer to the user than the former (Back-to-front)
<!--in both cases, the D2 is in the back of the D1, so D2 on Z-axis D1--><p "id=" > D1 <p "id=" > D2 ><p id= "D1" ></p><p id= "D2" ></p
2. Premise: Boxes belong to the same stacking context, and z-index different
Rule: The box with the Z-index property value is closer to the user
<!--D1 Z-index is 12, while the Z-index of D2 is 0, so D1 D2 on--><p "id=" D1 "style=;" ></p><p id= "D2" style= "z-index:0;margin-top:-20px;" ></p
3. Premise: Boxes belong to different stacking context, and stacking contexts no grandchild/father-child relationship
Rule: Boxes will search up the parent box until the parent boxes belongs to the same stacking context, then compare the Z-index property value of the parent boxes, and the box with the Z-index property value is closer to the user.
<p> <p id= "D1" style= "position:relative; z-index:10;" > <p id= "D4" style= "background:red; width:100px; height:100px;position:relative; z-index:9999;" >d3</p> </p> <p id= "D2" style= "Background:blue; width:50px; height:50px; position: Relative Top: -120px; Z-index:9; " >d2</p> <p id= "D3" style= "Background:green; width:50px; height:50px; position:relative; top: -80px; position:relative; z-index:11; " >d3</p></p>
4. premise: Boxes belong to different stacking context, and stacking contexts for grandchild/father-child relationship
Rule: The box belonging to the sub-stacking context must be closer to the user
<p style= "Background:blue; width:100px; height:100px; position:relative; Z-index:10; " > <p style= "background:red; width:50px; height:50px; position:relative; z-index:-10;" ></p></p>
5. Premise: Boxes belongs to the same stacking context, and both are non-positioned element.
Rule: float:left|right elements must be closer to the user
Iv. the role of Z-index
Wordy sentence: The same stacking context of the z-index is comparable, that is, in the discussion z-index must be with a description of which stacking context z-index.
It has two functions: 1. Set the stack level of box under the stacking context to which it belongs;
2. When the Z-index attribute value is not 0 o'clock, a new stacking context is created in the box, and the box's descendant box defaults to this new stacking context.
Note: The default value for Z-index is auto, which automatically assigns a value of 0. Therefore, the new stacking context is not created by default.
Z-index Valve in force
The Z-index property value is only valid for positioned box, and non-positioned box's z-index is always 0.
Perhaps you will cite the following counter-example:
<p id= "D1" style= "Z-INDEX:10;" ></p><script type= "Text/javascript" > console.log (window.getComputedStyle ( document.getElementById (' D1 ')) [' ZIndex ']); Output 10</script>But I'm sorry, this is the Z-index attribute value of non-positioned element p#d1, not the Z-index property value of non-positioned box.
For the positioned element, it assigns the Z-index to the corresponding positioned box, while the non-positioned element does not.
Five, compatibility problem--IE6/7 of strange behavior
IE6, 7 does not positioned box and Z-index creates stacking context instead of 0 o'clock, but positioned box creates stacking context.
<style> parent{width:200px; height:200px; padding:10px;} . sub{text-align:right; font:15px verdana;width:100px; height:100px;} . lt50{left:50px;top:50px;} </style> <p style= "Position:absolute; Background:lightgrey; "class=" "Parent" > <p style= "Position:absolute;z-index:20;background:darkgray;" Class= "Sub" >20</p> <p style= "Position:absolute;z-index:10;background:dimgray;" class= "Sub Lt50" >10</p></p> <p style= "position:absolute;left:80px;top:80px;background:black;" class= "Parent" > <p style= "Position:absolute;z-index:2;background:darkgray;" class= "Sub" >2</p> <p Style= "Position:absolute;z-index:1;background:dimgray;" class= "Sub Lt50" >1</p></p>Rendering results that meet the standards:
IE6, 7 render effect:
Vi. Summary
If there is a mistake, please correct me, thank you!
Respect the original, reprint please indicate from: http://www.cnblogs.com/fsjohnhuang/p/4333164.html ^_^ Fat Boy John
Vii. Reference
The standard--CSS core Visual format model (visual formatting model), 13: Hierarchical display (layered presentation)
compatibility issues due to z-index default values
recommendation-layered presentation
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
