The humble z-index can be involved in such a great learning

Z-index in the daily development is a more commonly used style, the general understanding is to set the label in the z-axis order, Z-index value large display in the front, the small will be obscured, yes, the actual role of Z-index is this.

But do you really know z-index? Do you know what its characteristics are? Here are a few nouns: cascade order (stacking order), Cascade context (Stacking), cascade horizontal (Stacking level).

Let's talk about the basic usage of Z-index:

　　z-indexCan be set to a value of three:

• auto, the default value. When set to auto , the current element cascade is 0, and the box does not create a new hierarchy context (unless it is the root element, i.e. );
• <integer>。 Indicates the cascade progression, which can cause negative values, and creates a new cascade context regardless of the value;
• inherit。 Parent element Inheritance

Z-index only plays a role in the positioning element , lifting chestnuts:

<style>    #box1 {        background:blue;        width:200px;        height:200px;    }    #box2 {        background:yellow;        width:200px;        height:200px;        margin-top:-100px;    }       </style><div id= "Box1" ></div><div id= "Box2" ></div>    

We hope that the box1 to be shown on the box2 above, perhaps at this time the reunion said, to Box1 plus a z-index greater than 0 value can be, this is not right,:

Box2 obscured the box1, even if box1 set Z-index value is no longer the same, said Z-index only in the positioning element (except position=static, because the element default is static, equivalent to the use of position style) in the role, It is also z-index to cooperate with position . interested can be personally verified, here only to give a try.

The z-axis order of the stacking order on absolute elements

Stacking order is not z-index unique, each element has a stacking order, the order of element rendering has a lot to do with it, in short, when the element is stacked, the level of the element will first appear above, the hierarchy of the same will be based on the DOM order of the rendering, the following will overwrite the previous. There may be no more text than a picture directly, the following picture is "Seven levels of hierarchy" (online theft, very classic picture)

Another chestnut, here still take that chestnut, in the premise of not z-index, using CSS cascading order to solve the occlusion problem, the code is modified as follows

<style>    #box1 {        background:blue;        width:200px;        height:200px;        Display:inline-block;    }    #box2 {        background:yellow;        width:200px;        height:200px;        margin-top:-100px;    }       </style><div id= "Box1" ></div><div id= "Box2" ></div>   

Here only minor changes, that is, to add a display:inline-block to Box1, here to explain, first box1 and box2 occurred cascading, and then box default to block-level elements, that is, Display:block, from the seven-step diagram, see, The stack level of the display:block element is lower than the display:inline-block element, so the browser renders the Box2 on top of the Box1,

The flexible use of the seven-order chart allows your code to minimize Z-index usage. Because many people develop the same system, if excessive use of z-index, there is likely to be a conflict, that is, occlusion problem, generally speaking z-index use within 10 of the value is sufficient.

Focus: Cascading contexts

Let's talk about it. If you create a cascading context, there are a number of ways CSS can create cascading contexts, but there are a few common ones.

1, the positioning element Z-index not equal to Auto will create a cascading context for the element

2, the HTML root element will create a cascading context by default (this is a special case, know the line)

3, element opacity not equal to 1 creates cascading context

4, Element transform not equal to none will create cascading context

There are other ways to create cascading contexts, which are not introduced here, and the above four are commonly used in development.

So knowing how to create a cascading context, the key to the problem is, what is the cascading context?

This must be combined with the previous seven-step diagram, the bottom layer is built on the basis of the cascade context, that is, in the cascade context, all the elements will be rendered on the background and the border, in the Block box, background When a child element is set to a negative value in an element that does not exist in the hierarchy context, such as a float box, the child element is obscured by the parent element Z-index. Said it might not be good to understand, give a chestnut digest:

<style>    #box1 {        position:relative;        width:200px;        height:200px;        Background:blue;    }    #box2 {        position:relative;        z-index:-1;        width:100px;        height:100px;        Background:yellow;    } </style><div id= "Box1" >      <div id= "Box2" ></div></div>

Here, box does not create a cascading context, and when the child element Box2 is set z-index:-1, the box2 is the root element, that is, the HTML root tag, according to the seven-order chart can be seen, Box2 will be rendered on the HTML tag above, ordinary box Box1 (z-index: Auto), so the box2 is obscured. ：

So how do we solve this problem? I believe you already know what to do here, yes, to create a cascading context for box1, then the elements in box1, no matter how much z-index is negative, will be displayed on the background of Box1,

Here I used the first way to create a cascading context, that is, the elements in the positioning element Z-index not auto will establish a cascading context , perhaps some students began to wonder, Box1 Z-index less than Box2 Z-index, Why does the Box2 lack show up on the box1? Hehe, this is corresponding to the seven-order diagram of the cascade level of the relationship, do not understand again carefully try to figure out the seven-order chart .

• The cascade level is only compared in the context of the immediate parent cascade, that is, the cascade level of the child elements in the cascading context A is not compared to the child elements in the other Cascade context. As an example,

<style>    #box1 {        z-index:10;        position:relative;        width:200px;        height:200px;        Background:green;    }    #box1_1 {        position:relative;        z-index:100;        width:100px;        height:100px;        Background:blue;    }    #box2 {        position:relative;        z-index:11;        width:200px;        height:200px;        background:red;        Margin-top: -150px;    } </style><div id= "Box1" >    <div id= "box1_1" >        </div></div><div id= "Box2" > </div>

The child elements in the cascading context Box1 Box2 set Z-index to 100, while the z-index of the cascading context Box2 is only 11, and the actual rendering effect is box2 on the Box1 and Box1_1, which should be said above The cascade level is only done in the context of the first parent cascade of the element, that is, the cascade level of the child elements in the cascade context A is not compared to the child elements in the other cascade context, that is, the z-index of the live box1_1 has no effect on elements outside of his parent cascade context. Here Box2 and Box1 are in the same cascading context (the HTML root element will create the cascading context by default), so they will be stacked horizontally compared, box2 Z-index is greater than box1, so we see the following, Box2 obscured the box1, do not care box1 in the child element Z-index is how much,

Here my understanding of the Z-index is finished, probably said the following points:

1. Z-index is only valid in positioning element (position not equal to static)

2, seven strata level chart

3, Z-index cascade level comparison is limited to the parent cascade context

Second, the following points need to be noted:

1, in the development as far as possible to avoid cascading the multi-layered context of nesting, because the cascade context nesting too many words prone to confusion, if the stacking context is not enough to understand the control.

2, non-floating Layer Elements (dialog box, etc.) try not to use Z-index (by stacking order or DOM order or by stacking the context of processing)

3, Z-index set the value as far as possible in single-digit

Spent a night to organize this article, even I myself to Z-index also have a more profound understanding, hope to you also help. If you have any errors, please correct me

Http://www.cnblogs.com/bfgis/p/5440956.html

The humble z-index can be involved in such a great learning (turn)